I'm trying to add VueJS in my Laravel app, but my first component is not displayed on my page.
As you can see on the source page, we can see the component "login".
And this is the associate code:
<template>
<p>Coucou je suis un élément Vue.JS</p>
</template>
<script>
export default {
name: "login"
}
</script>
<style scoped>
</style>
It's just a simple component that display a string.
Here you have the app.js
/**
* 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');
window.Vue = require('vue');
/**
* 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('example-component', require('./components/ExampleComponent.vue'));
Vue.component('login', require('./components/Auth/Login.vue'));
const app = new Vue({
el: '#app'
});
But my problem is that nothing appears on the html page :/ It's completely blank...
If someone could explain what's wrong, it will be so appreciate. Thank in advance.
Well, i found my mistake. I forget to add theses two lines :
<script src="{{ asset('js/manifest.js') }}"></script>
<script src="{{ asset('js/vendor.js') }}"></script>
Related
Getting to know laravel (using version 6) and i was wondering how i can make sure that my view is using my Vue component? In this case its the HelloWorld.vue component i want rendered in the albums.blade.php view file.
In my app.js i have made sure to register the component like this:
Vue.component('hello-world', require('vue\src\components\HelloWorld.vue').default);
And then im using it like this inside the albums.blade.php:
<hello-world></hello-world> and i have also made sure to include the script tag referring to app.js like this:
<script src="{{ asset('js/app.js') }}" defer></script>
With no success... any inputs?
See my folder structure here
you need to use laravel mix for vue js
Laravel Mix
change your <script src="{{ asset('js/app.js') }}" defer></script>
to <script src="{{ mix('js/app.js') }}" defer></script>
Place check Laravel Mix docs
My personal config using Laravel mix is:
app.js
require('./bootstrap');
import Vue from 'vue';
window.Vue = Vue;
/** Auto register components */
const files = require.context('./', true, /\.vue$/i)
files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default));
// Other things
// ....
const app = new Vue({
el: '#app'
});
albums.blade.php
Place this script tag at the bottom of the page.
<script src="{{ mix('js/app.js') }}"></script>
Then you could use the component like this:
<div>
<hello-world></hello-world>
</div>
Recommendation
Consider learning Laravel 9 instead of Laravel 6. This because 9 is the newest version and also the actual LTS release.
I have a basic vue 2.6.11 component that lives in a laravel 6 application. It lives at resources/js/components. I create a basic component and then in my app.js file I have vue imported and I define my vue component. Then in my app.blade.php I use the vue component but the text within my <template><div>Text here</div></template> does not appear on the screen. The <h1> text appears but not the vue component text. I looked at other posts but the vue versions other questions on here use are 2-3 years too old and don't apply. Any help is appreciated, thanks.
TableDraggable.vue
<template>
<div>
<h1>Test Text</h1>
</div>
</template>
<script>
export default {
mounted() {
console.log('this component has been mounted');
}
}
</script>
What I am using in my app.blade.php file
<h1>This is a test to see if VUE is working</h1>
<table-draggable></table-draggable>
app.js snippet
//Bring in VUE and vue draggable
window.Vue = require('vue');
import VueDraggable from 'vuedraggable';
Vue.component('table-draggable', require('./components/TableDraggable'));
In app.js try the following:
...
window.Vue = require('vue');
import VueDraggable from 'vuedraggable';
Vue.use(VueDraggable);
import TableDraggable from './components/TableDraggable';
Vue.component('table-draggable', TableDraggable);
const app = new Vue({
el: '#app',
data() {
return {};
},
});
...
Then in some parent element of where you are using your component, make sure it has an id of app. eg:
<div id="app">
<h1>This is a test to see if VUE is working</h1>
<table-draggable></table-draggable>
</div>
This is a basic example of getting vue working on your site, and not necessarily the best way to be structuring your assets depending on your needs. The biggest considerations about how to structure these are how bulky your assets will become if you include everything in app.js.
I am a new VueJs developer and there is something I can’t seem to get my head around: Using multiple single page components in the app.js file.
These are the questions I’m having trouble answering:
Am I supposed to register ALL of my top-level (parent) components in the Vue Instance in the app.js file?
// App.js
import Component1 from './component/C1.vue';
import Component2 from './component/C2.vue';
const app = new Vue({
el: '#app',
components: {All Top Level components here?}
});
If I need another Vue instance in one of my blade.php files. Where do I instantiate it? Is it best practice to only instantiate Vue once (in the el: #app in app.js) – this doesn’t seem right to me, but I’m new so what do I know.
How should I separate my Vue code from my Laravel Code in the main file? (create a separate section?)
<!DOCTYPE html>
<head>
<!-- App.js -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
#yield('content')
</div>
<div id="app2">
<!-- Where can I instantiate this?--> (Question 2)
</div>
</body>
#yield('vueScripts') <-- (Question 3)
</html>
Q1. You should register all your Vue Component that you will be using inside a blade file.
On the resource folder at the app.js
Vue.component('example-component', require('./components/ExampleComponent.vue').default); if you are just using a component on a single parent component you dont need to register the component globally you just register it in the parent component file like so
//On Parent Component file
import ChildComponent from './ChildComponent.vue' //import child component
export default
{ components: { ChildComponent } // child component registration
,
Q2. One Vue instance is enough
Q3. You dont need a vuescript if you are already using a vue component vue scripts should go in the vue component file
The new laravel comes with a built-in VueJs. But what I need is one instance of vuejs binded to body tag for the whole app. How can I achieve this ? Is there a way of binding vue directly on body element, even though its not recommended ? The purpose is only using vue to make an API calls for certain parts of my app, but I need vue to be available globally and without binding to specific element, which will destroy my current app
Update Code:
default layout - laravel
...
</head>
<body id="app" class="{{isActiveRoute('home')}}">
...
</body>
resources/assets/app.js
require('./bootstrap');
window.Vue = require('vue');
Vue.component('example', require('./components/Example.vue'));
const app = new Vue({
el: '#app',
components: ['example'],
data: {
name: 'test'
},
methods: {
addToCart() {
console.log('add to cart');
}
},
I have a small site which uses Laravel and Vue.js for rendering a list. You can view it here. It looks like the Google crawler cannot follow the links generated by v-for.
Google Search Console says: Not found: vergleichen/%7B%7B%20anbieter.slug%20%7D%7D and all onpage crawlers I know are failing crawling the links.
What am I doing wrong? Is there a workaround? Any help is appreciated ♥
Update
#Linus: Your assumption is correct, this is the content of my blade file and the JS looks like this:
var suche = new Vue({
el: '#suchen',
data: {
search: ''
}
});
So I have to create a new component in order to get this working?
Update
I switched to Hideseek. Problem "solved".
The google crawler parses your HTMl before Vue can replace {{anbieter.slug}}
You can extract the content of your #app element into a <template> element, which google should ignore, and set this element as the template for Vue.
This should make sure that Vue will first parse the template, insert it into the DOM, and afterwards, the crawler can parse the links.
Untested though.
Example:
var App = new Vue({
el: '#app',
template: '#main',
data() {
return {
test: 'Test'
}
}
})
HTML:
<div id="app">
<!-- nothing here, content will come from the <template> below. -->
</div>
<template id="main">
{{test}}
</template>
To support IE9, use <script type="x-template"> instead of <template>
fiddle: https://jsfiddle.net/Linusborg/an49og18/