So, I am facing some problem on loading vuejs component on my blade engine. when I added vuejs component it either load the vuejs 'bootstrap' or load the public/js/app.js depending what is commented out. this is the app.blade.php code
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Global Shopping Mall</title>
<!-- Scripts -->
<!-- <script src="{{ mix('js/app.js') }}" ></script> -->
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" integrity="sha512-q3eWabyZPc1XTCmF 8/LuE1ozpg5xxn7iO89yfSOd5/oKvyqLngoNGsx8jq92Y8eXJ/IRxQbEC FGSYxtk2oiw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<link href="/src/jquery.exzoom.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0 6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<script src="/src/jquery.exzoom.js"></script>
<!-- Styles -->
<link href="{{ mix('css/app.css') }}" rel="stylesheet" defer >
<style>
body{
background-color: white;
}
.custom_navbar{
height: 100px;
}
</style>
</head>
<body>
<div id="app">
<nav style="height: 60px;">
<img src="{{asset('images/gsm.jpg')}}" alt="GSM Logo" class width="150px" height="65px">
<div >
<button type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="true" aria-label="{{ __('Toggle navigation') }}">
<span ></span>
</button>
<div id="navbarSupportedContent">
<!-- Right Side Of Navbar -->
<ul >
<!-- Authentication Links -->
@guest
@if (Route::has('register'))
<li >
<a href="{{ route('register') }}">{{ __('SignUp') }}</a>
</li>
@endif
@if (Route::has('login'))
<li >
<a href="{{ route('login') }}">{{ __('Login') }}</a>
</li>
@endif
@if (Route::has('login'))
<li >
<a href="{{ route('login') }}">{{ __('Login as Guest') }}</a>
</li>
@endif
@else
<li >
<a href="/home"><strong>Home<strong></a>
</li>
<li >
<a id="navbarDropdown" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
{{"Hi, "}}{{ Auth::user()->name }}
</a>
<div aria-labelledby="navbarDropdown">
<a href="/user_profile">
User Profile
</a>
<!-- <a href="/product_details">
Product Details
</a> -->
<a href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
{{ __('Logout') }}
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" >
@csrf
</form>
</div>
</li>
@endguest
</ul>
</div>
</div>
</nav>
@if(Auth::check())
@include('layouts.gsm_nav')
@endif
<main>
@yield('content')
</main>
@extends('layouts.footer')
</div>
<style>
.custom_nav{
padding-right: 50px
}
/* .v-application--wrap {
min-height: 0;
} */
</style>
<script defer src="{{ mix('js/app.js') }}" type="text/javascript"></script>
</body>
</html>
if I comment this line
script defer src="{{ mix('js/app.js') }}" type="text/javascript"></script>
then its load my blade style without vuejs element but if not then its load only vuejs not public script
heres my vuejs app.js code and bootstrap.js code
app.js
require('./bootstrap');
window.Vue = require('vue');
// Main Screens Components
Vue.component('user-list', require('./components/UserList.vue').default);
Vue.component('main-screen', require('./components/Main.vue').default);
// Streaming Components
Vue.component("broadcaster", require("./components/Broadcaster.vue").default);
Vue.component("viewer", require("./components/Viewer.vue").default);
// Vue.component('video-chat', require('./components/VideoChat.vue').default);
Vue.prototype.$userId = document.querySelector("meta[name='user-id']").getAttribute('content');
import Vue from 'vue';
import Vuetify from 'vuetify';
Vue.use(Vuetify);
const app = new Vue({
el: '#app',
vuetify: new Vuetify(),
});
Echo.private('chat')
.listen('MessageSent', (e) => {
this.messages.push({
message: e.message.message
});
});
bootstrap.js
window._ = require('lodash');
/**
* We'll load jQuery and the Bootstrap jQuery plugin which provides support
* for JavaScript based Bootstrap features such as modals and tabs. This
* code may be modified to fit the specific needs of your application.
*/
try {
window.Popper = require('popper.js').default;
window.$ = window.jQuery = require('jquery');
require('bootstrap');
} catch (e) {}
/**
* We'll load the axios HTTP library which allows us to easily issue requests
* to our Laravel back-end. This library automatically handles sending the
* CSRF token as a header based on the value of the "XSRF" token cookie.
*/
window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
/**
* Echo exposes an expressive API for subscribing to channels and listening
* for events that are broadcast by Laravel. Echo and event broadcasting
* allows your team to easily build robust real-time web applications.
*/
import Echo from 'laravel-echo';
window.Pusher = require('pusher-js');
window.Echo = new Echo({
broadcaster: 'pusher',
key: process.env.MIX_PUSHER_APP_KEY,
wsHost: window.location.hostname,
wsPort: 6001,
forceTLS: false,
disableStats: true,
});
this is the element code
<div >
<v-app>
<main-screen user-name="{{ Auth::user()->name }}"></main-screen>
<meta name="user-id" content="{{ Auth::user()->id }}">
<meta name="user-name" content="{{ Auth::user()->name }}">
<meta name="csrf-token" content="{{ csrf_token() }}">
<button type="button" onclick="openForm()"></button>
</v-app>
</div>
Want this style with vuejs element
i am stuck.
CodePudding user response：
the issue I can see your code is you're putting your blade code inside <div id="app"> </div> but the thing is whenever you include <script defer src="{{ mix('js/app.js') }}" type="text/javascript"></script> it will remove your any html/blade code and put vue.js code inside that div.
So you've to do something like below:
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Global Shopping Mall</title>
<!-- Scripts -->
<!-- <script src="{{ mix('js/app.js') }}" ></script> -->
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" integrity="sha512-q3eWabyZPc1XTCmF 8/LuE1ozpg5xxn7iO89yfSOd5/oKvyqLngoNGsx8jq92Y8eXJ/IRxQbEC FGSYxtk2oiw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<link href="/src/jquery.exzoom.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0 6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<script src="/src/jquery.exzoom.js"></script>
<!-- Styles -->
<link href="{{ mix('css/app.css') }}" rel="stylesheet" defer >
<style>
body{
background-color: white;
}
.custom_navbar{
height: 100px;
}
</style>
</head>
<body>
<div>
<-- put your blade/html content here -->
<div id="app"></div>
<-- Create a div with id of app to render vue.js content, like above -->
</div>
<style>
.custom_nav{
padding-right: 50px
}
/* .v-application--wrap {
min-height: 0;
} */
</style>
<script defer src="{{ mix('js/app.js') }}" type="text/javascript"></script>
</body>
</html>
Do let me know if you need any other help in same scenario.