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 :)
Related
I've recently started a new Jetstream project with Livewire. I've been playing around with setting up my base layout etc and I keep getting a message in the console (which I'm not sure if its mucking up what I'm trying to do with Alpine). In the console it says:
Livewire: It looks like AlpineJS has already been loaded. Make sure Livewire's scripts are loaded before Alpine
Which is confusing me as I am not loading AlpineJS anywhere else. I don't have any CDN references anywhere in my base templates. Alpine is only referenced once where it gets set up which was automatically generated when I first created the jetstream project (under resources/js/app.js).
My understanding is that Livewire already loads Alpine automatically. So why would this error come up?
If you installed alpine as a module and you are having this error, go to your layout file (app.blade.php) or whatever full livewire page that's giving this error or where you imported your livewire scripts and app.js file, then import your livewire scripts before app.js e.g
#livewireScripts
<script src="{{ asset('js/app.js') }}"></script>
instead of the old way:
<script src="{{ asset('js/app.js') }}"></script>
#livewireScripts
I am working in Laravel , and Vue components are showing/updating in local but not showing in server .
I don't know what the problem is,because I have all the packages of vue and node installed on the server.
app.js picture is:
i used npm run dev ,npm run production npm run watch They all worked without error but still show nothing
please help me What can I do؟
You didn't call your component in dashboard.blade.php file.
<div id="app">
<login-component></login-component>
</div>
Or if you want to call example component then:
<div id="app">
<login-component></login-component>
</div>
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'
});
I am working in Laravel 5.4, and Vue components are not showing/updating.
I start a new project and create a route /chat in web.php
This is chat.blade.php
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/app.css">
</head>
<body>
<div id="app">
<example></example>
<chat></chat>
</div>
<script type="text/javascript">
window.Laravel = { csrfToken: '{{ csrf_token() }}' };
</script>
<script src="js/app.js"></script>
</body>
</html>
This is app.js
require('./bootstrap');
Vue.component('example', require('./components/Example.vue'));
Vue.component('chat', require('./components/Chat.vue'));
const app = new Vue({
el: '#app'
});
Example and Chat components are some basic templates, I am not passing any data, just plain text.
Chat.vue
<template lang="html">
<div id="content">
<h1>Messages</h1>
<p>Message text</p>
<small>Hiii</small>
</div>
</template>
<script>
export default {
}
</script>
When I run php artisan for the first time, everything works. I try to edit some text in Chat.vue, like change 'Hiiii' to Hello, when I reload the page it won't change, it just stays the same. I tried restarting the pc, running php artisan again, anything I could think of.
I tried putting some Vue code directly in chat.blade.php, and than it works. It looks like it is not detecting changes in app.js and components.
FYI, I even deleted the Example.vue component. It still appeared on the page.
The best way to solve this problem is to update npm because it will update all the packages and install missing packages, as a result you will have laravel mix compiling your assets; right now you are not able to do so.
npm update
For some people an easier solution can work which is to run the watch-pol command
npm run watch-poll
Have you tried to clear browser cache? This should solve the problem.
everyone I just got the answer and I want to share this with everyone.
Problem:- I am learning Vue js and I need to delete browser history every day to see changes I have made in the editor.so I search for that and not found a valuable answer for this. but as now I got the solution so I decided to share this solution with everyone.
all you need to do is
1)Go to developer tools.
2)Click on the Network tab
3)Click disable cache (Look at the highlighted portion in the image below)
4)Refresh your page again!
Sometime copying code from internet we add some unwanted line.
Just check this line from App/Config/app .
Make sure it is in Development mode.
'env' => env('APP_ENV', 'development'),
copy this code in app.blade.php :
const app = new Vue({
el: '#app'
});