Installed vue js with node modules for laravel 5.4 project but the components are not displayed after I run npm run watch
Installed npm, installed vue.js added vue.js file example in app.js, npm run watch - no result
blade template file
<div id="app">
<h1>Test</h1>
<h2>asda</h2>
<example-component></example-component>
</div>
App.js
import Vue from 'vue';
Vue.component('example-component',
require('./components/ExampleComponent.vue'));
//Set toaster duration
Vue.config.productionTip = false
new Vue({
el: '#app',
components: {
}
})
The component should be loaded after page refresh but is not. No any error messages in console.
If you are using Webpack, you should append the require(...) with .default so it becomes require(...).default. Example in Laravel Git
Make sure that you export default in your components. Example in Laravel Git
Related
In my company we use laravel-blade and vue. It was usually that in blade files there was body with id app, and then there was a <script> new Vue({...}); </script>. In app.js there was window.Vue=require('vue').default;, so that Vue was available in every script. However, I don't know, how can I use Vue in blade file after migrating to Vue 3. I tried to write in my app.js file import createApp from 'vue'; window.createApp = createApp; but I don't even know if it makes sense. Can you give me advice, how excatly can I use Vue 3 in blade scripts?
I have a laravel/VueJs app which was normal until I decided to add Vuetify. After installing the Vuetify package with npm, I imported it via a plugin/vuetify.js folder inside my resources/js folder like so(inside plugin/vuetify.js)
import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
Vue.use(Vuetify)
export default new Vuetify;
I imported into app.js like so;
import vuetify from './plugin/vuetify'
And in the Vue instance added vuetify;
const app = new Vue({
el: '#app',
router,
vuetify
});
My vuetify components work well but some laravel components like the navbar breaks, the height increasing significantly. When I comment out the vuetify import, it goes back to normal. Can somebody help point out a fix or what am doing wrong please?
Laravel 5.8, vuetify 2.0.7
Vuetify and Bootstrap 4 share some of their css class names. You are trying to use two different css frameworks on the same page. Vuetify is probably getting loaded after bootstrap 4 which means it's overwriting some of bootstraps css.
The easy solution is just to use one or the other for your application. There are libraries for vue that allow you to easily use bootstrap 4 with vue. I've used bootstrap-vue before and it works well.
If you REALLY want to use two different css frameworks on the same page you can load vuetify css inside of a class.
e.g.
app.scss
.my-app {
#import 'vuetify/dist/vuetify.min.css'
}
app.vue
<template>
<div class="my-app">
Everything in here is using vuetify
</div>
</template>
I have installed vue.js by following these steps in Laravel 5.6 and all other dependencies are working perfectly. Only Vue.js is not responding.
npm intall
npm run dev
npm run watch
I am sharing all the codes on I have added. I have created a id="app" in my html file.
<div id="app">
<div class="container">
<articles></articles>
</div>
<!-- I used this link in my html file for connecting with app.js file
-->
<script src="{{asset('js/app.js')}}"></script>
I edited the app.js file that is as under.
require('./bootstrap');
window.Vue = require('vue');
Vue.component('articles', require('./components/Articles.vue')
);
const app = new Vue({
el: '#app'
});
I also created Articles.vue file and linked that to app.js. But my html page is showing nothing.
My file in components/Articles.Vue
<template>
<h1>Hello World!</h1>
</template>
Console is showing no errors
Vue Tab
When I inspect DOM, I get this
This is the Vue file. It is also not showing any tags
As ceejayoz said in the comment: Rename it to e.g. articleElement and use it as <article-element></article-element>
this thread is a bit old, but as i had the same problem as you had (maybe we both watched the same youtube video "Full Stack Vue.js & Laravel"), i will still share my solution. With some research and a lot of trying around i landed on the official Laravel page (https://laravel-mix.com/docs/6.0/what-is-mix).
The last task of this guide "npx mix" did the job for me. Everytime i change some of my js files now i use this little command to compile again and all my changes take place.
Hopefully this will help some others too :)
I'm starting to work with laravel and I try to use Vue. So on my resources/assets/js/app.js I have
Vue.component('example', require('./components/Example.vue'));
const app = new Vue({
el: '#app'
});
So my Example.vue is basicly what it's given with laravel. And in my welcome.blad I have
#extends('layouts.app')
#section('content')
<example>
</example>
#endsection
<script src="{{ elixir('js/app.js') }}"></script>
in my package.json I have :
"devDependencies": {
"vue": "^2.1.10",
"vue-resource": "^1.0.3"
}
But Nothing appear in my welcome page. I ran npm install npm run dev And change several things in my script, don't remember all but tried a lot of things and can't make it work
Laravel includes in the stock templates some default handling for CSRF tokens.
Uncaught TypeError: Cannot read property 'csrfToken' of undefined
means you've taken this out or broken it in some way, preventing the rest of the JS from running.
I am trying implement passport using Laravel 5.4 and I have followed the official documentation step by step. Everything seems to be working fine as per instructions till the point I hit "Frontend Quickstart"
As instructed I published the vendor using
php artisan vendor:publish --tag=passport-components
This gave me the components as expected. After which I registered my components in my app.js
app.js
/**
* Add the CSRF Token to the Laravel object. The Laravel object is being
* used by Axios and the reference can be seen in ./bootstrap.js
*
* Requires the token be set as a meta tag as described in the documentation:
* https://laravel.com/docs/5.4/csrf#csrf-x-csrf-token
*/
window.Laravel = { csrfToken: document.head.querySelector("[name=csrf-token]").content }
/**
* 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.
*/
require('./bootstrap');
/**
* The Vue components for managing the OAuth setup
*/
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')
);
/**
* Instantiate Vue for use
*/
const app = new Vue({
el: '#app'
});
I installed the dependencies and build the components
npm install
npm run dev
Placed the components in my home.blade.php (test purpose)
#extends('layouts.app')
#section('content')
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">Dashboard</div>
<div class="panel-body">
<passport-clients></passport-clients>
<passport-authorized-clients></passport-authorized-clients>
<passport-personal-access-tokens></passport-personal-access-tokens>
</div>
</div>
</div>
</div>
</div>
#endsection
But nothing shows up in the view. I tried searching a lot in this topic but all the solutions seems to be pointing towards the gulp config. But Laravel 5.4 doesn't use gulp anymore it uses webmix.
I have been struggling with this for a while now, looking for the communities expert option to help be get through this.
Thanking You.
Make sure you've added <script src="{{ asset('js/vue.min.js')}}"></script> on your layouts.app file.
From official document
In order to use the Passport Vue components, you must be using the Vue
JavaScript framework. These components also use the Bootstrap CSS
framework. However, even if you are not using these tools, the
components serve as a valuable reference for your own frontend
implementation.
Download vuejs here
Hope this help
In your dom, your components must have a parent with an id of "app" since you declared it in your app.js :
const app = new Vue({
el: '#app'
});