in laravel application using vue 3. when I try to load welcome.blade.php file it is not visible vue file content and console got following error Uncaught ReferenceError: Vue is not defined <anonymous> http://localhost:8000/js/app.js:37486 app.js code line 37486 is as var _Vue = Vue,
my app.js
require('./bootstrap');
const { createApp } = Vue;
Vue.component('mainapp', require('./components/mainapp.vue').dafault)
const app = createApp({
/* root component options */
});
app.mount('#app');
and welcome.blade.php
<html>
<body>
<div id="app">
<mainapp></mainapp>
</div>
</body>
<script src="{{mix('/js/app.js')}}"></script>
</html>
how could I fix this?
I need some answers to solve this prob
I Think you will need something like this in your app.js file:
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
import Vue from 'vue';
require('./bootstrap');
Vue.component('mainapp', require('./components/mainapp.vue').dafault)
/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
const app = new Vue({
el: '#app'
});
Or do it in this way for Vue 3.0 +:
require('./bootstrap');
import { createApp } from 'vue';
import mainapp from './components/mainapp.vue';
createApp({
components: {
mainapp,
}
}).mount('#app');
Related
I have a server-side-rendered legacy PHP 5.6 web app that I want to modernise using VueJS
Within the project structure I have set up a new Vue project and set up Vue Router and Webpack with an entry point of main.js
Main.js
Vue.config.productionTip = false
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import router from './router/router'
new Vue({
render: h => h(App),
router
}).$mount('#app')
I am currently inserting VueJS into the legacy app by inserting this code at the bottom of a php file:
<div id="app">
</div>
<script src="http://localhost:8080/js/main.js"></script>
The url of this page is https://www.example.com/user_portal/employee_holiday_info.php#/
However Vue Router recognises it as / because it is the point of entry.
At the moment I have to insert the above code on every PHP file that I want to use VueJS on. Is there a better way of doing this?
If I insert the above code at the bottom of say, index.php then Vue Router would also recognise that page as /. In which case both urls:
https://www.example.com/user_portal/employee_holiday_info.php#/
https://www.example.com/user_portal/index.phpwould render the same Vue component, HelloWorld.
Vue Router
import HelloWorld from "../components/HelloWorld";
Vue.use(Router)
const router = new Router({
routes: [
{
path: '/',
name: 'hello-world',
component: HelloWorld,
}
]
});
export default router;
How can I set this up so I can on multiple Vue components throughout a single php file and share data between them using Vuex.
I have a project in Laravel where I import my app.js is:
require('./bootstrap');
window.Vue = require('vue');
const app = new Vue({
el: '#app',
data: {},
methods: {},
});
This file is imported in my main layout (app.blade.php) like so:
<div id="app">
#yield('content')
</div>
<script src="{{asset('js/app.js')}}"></script>
#yield('scripts')
I guess you can't instantiate a new Vue instance within another one... so I MUST work with a single Vue instance. The #app div encompasses all of the dynamic content of my multiple-page application, and so my question is... on different pages, how do I separate my Vue.js code? If I put all of the code in app.js, it will get cluttered, and my code will have missing references depending on which page the user is on.
I tried writing a separate <script></script> for each page, but this requires me to input the CSRF token for each page, but this feels DRYish.
How do people do this?
Your route should be like this to accept vue router
Route::get('/{view?}', function () {
return view('vue');
})->where('view', '^(?!api\/)[\/\w\.-]*');
this will accept every route exept api routes
working with Laravel 5.7 and Vue Js. this is
app.js
let Myheader = require('./components/Myheader.vue');
let Myfooter = require('./components/Myfooter.vue');
const app = new Vue({
el: '#app',
components:{Myheader,Myfooter}
});
blade.php file
<body>
<div id="app">
<Myheader></Myheader>
<Myfooter></Myfooter>
</div>
<script src="{{ asset('js/app.js')}}"></script>
</body>
but when I run artisan serve command it is not displayed vue component. how can fix this problem?
If you are use Laravel Mix 4.0+, try adding .default to your requires. This is needed when you use CommonJS to import modules.
let Myheader = require('./components/Myheader.vue').default;
let Myfooter = require('./components/Myfooter.vue').default;
I'm trying to get Passport setup on Laravel 5.3, but the Vue components don't seem to be showing up in the blade.
Here is the code for my blade:
#extends('connect.frame')
#section('title')
API Settings - KHConnect
#endsection
#section('header')
<!-- Page Header -->
<div class="content page-header" style="margin-bottom: 2em;">
<div class="container">
<h1 style="padding-top: 0.5em;font-size: 4em;">KHConnect</h1>
</div>
</div>
#endsection
#section('body')
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div class="row">
<passport-clients></passport-clients>
<passport-authorized-clients></passport-authorized-clients>
<passport-personal-access-tokens></passport-personal-access-tokens>
</div>
#endsection
And here is the code in my app.js:
/**
* First we will load all of this project's JavaScript dependencies which
* include Vue and Vue Resource. This gives a great starting point for
* building robust, powerful web applications using Vue and Laravel.
*/
require('./bootstrap');
/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
Vue.component(
'passport-clients',
require('./components/passport/Clients.vue')
);
Vue.component(
'passport-authorized-clients',
require('./components/passport/AuthorizedClients.vue')
);
Vue.component(
'passport-personal-access-tokens',
require('./components/passport/PersonalAccessTokens.vue')
);
const app = new Vue({
el: '#app'
});
I have ran gulp and installed Laravel Elixir, and am loading <script src="{{asset('js/vue.min.js')}}"></script> and <script src="{{asset('js/app.js')}}"></script> in my blade.
Thanks in advance.
A vue-js vm requires a root element to work on. In the question the root element id is "app":
const app = new Vue({
el: '#app'
});
But it was missing in the HTML of the page. Adding a <div id="app">...</div> container solved the problem as seen in the comments.
In my case I had to run in cli following commands:
npm install
npm run production
Hello i am trying passport in laravel 5.3 using following link
https://laravel.com/docs/5.3/passport
in app.js
/**
* First we will load all of this project's JavaScript dependencies which
* include Vue and Vue Resource. This gives a great starting point for
* building robust, powerful web applications using Vue and Laravel.
*/
require('./bootstrap');
/**
* Next, we will create a fresh Vue application instance and attach it to
* the body of the page. From here, you may begin adding components to
* the application, or feel free to tweak this setup for your needs.
*/
Vue.component('example', require('./components/Example.vue'));
Vue.component(
'passport-clients',
require('./components/passport/Clients.vue')
);
Vue.component(
'passport-authorized-clients',
require('./components/passport/AuthorizedClients.vue')
);
Vue.component(
'passport-personal-access-tokens',
require('./components/passport/PersonalAccessTokens.vue')
);
const app = new Vue({
el: 'body'
});
in my view file
#extends('layouts.app')
#section('content')
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<passport-clients></passport-clients>
<passport-authorized-clients></passport-authorized-clients>
<passport-personal-access-tokens></passport-personal-access-tokens>
</div>
</div>
</div>
#endsection
i have tired updating the node to 6.4.0 also on 6.7.0 but noting worked for me
also changed the gulp file
const elixir = require('laravel-elixir');
require('laravel-elixir-vue');
/*
|--------------------------------------------------------------------------
| Elixir Asset Management
|--------------------------------------------------------------------------
|
| Elixir provides a clean, fluent API for defining some basic Gulp tasks
| for your Laravel application. By default, we are compiling the Sass
| file for our application, as well as publishing vendor resources.
|
*/
elixir(function (mix){
mix.sass('app.scss')
.webpack('app.js');
});
but templates are not showing up in my views even in source code noting added against includes
Make sure that you included js file in layouts.app
#yield('content')
</div>
<!-- Scripts -->
**<script src="/js/app.js"></script>**
</body>
</html>
and in your app.js change body to #app
const app = new Vue({
el: '#app'
});
I faced the same issue, and this worked for me.