I am new to vue and I am trying to get a simple component to display in a div. I am using laravel 5.4 with laravel mix and vue version 2.6.6 to display a vue component.
this is the div in my view file:
<div id="sidenav"> </div>
This is my app.js
require('./bootstrap');
import Vue from 'vue';
Vue.component('SideNav', require('./components/SideNav.vue').default);
var SideNav = new Vue({
el: '#sidenav'
});
This is SideNav.vue
<template>
<div>
<h1>Test</h1>
</div>
</template>
<script>
export default {
name: 'SideNav'
}
</script>
There aren't any errors with npm install, npm build, npm run dev, or npm run watch. On the page I do not see
Test
I'm sorry for such a newb question, but this has been driving me crazy for a few hours.
Try something like this;
<div id="sidenav">
<SideNav></SideNav>
</div>
You "mount" your Vue instance to the root element with id #sidenav here:
var SideNav = new Vue({
el: '#sidenav'
});
meaning, when you created your Vue component here: Vue.component('SideNav', require('./components/SideNav.vue'));, you have access to the <SideNav> tag within that root element.
Also, I'm not sure if you need the .default at the end of your Vue.component(...) creation.
Related
My Laravel 9 project uses Vue 2.6 and Vuetify.
As I need to display a Google map, I decided to use vue2-google-maps package. My Google Maps is displaying as blank (though it does take the proper width and height on the page)
This is my app.js file:
import Vue from 'vue'
import vuetify from './plugins/vuetify' // path to vuetify export
import * as VueGoogleMaps from 'vue2-google-maps'
Vue.use(VueGoogleMaps,{
key:'My_GOOGLE_API_KEY',
libraries: 'places',
})
new Vue({
vuetify,
}).$mount('#app')
The is my blade file
<template>
<div class="map">
<p>Google Map</p>
<gmap-map
:center="{
lat: 47.2736,
lng: 16.0843
}"
:zoom = "7"
style="width:100%; height: 280px;"
>
</gmap-map>
</div>
</template>
Am I doing something wrong? Please advise how to fix the issue or if there is any suggestion to use some-other package.
Thanks.
This question already has answers here:
Vue template or render function not defined yet I am using neither?
(28 answers)
Closed 1 year ago.
This is a new-comer question. I have a Blade template:
<div id="app">
<example-component
:componentMessage="appMessage"
></example-component>
</div>
<script>
var app = new Vue({
el: "#app",
data: function() {
return {
appMessage: {{$message}}
}
}
})
</script>
And a Vue component
resources/js/components/ExampleComponent.vue
<template>
<p>{{componentMessage}}</p>
</template>
<script>
export default {
props: ['componentMessage'],
}
</script>
So the data flow will look like this: $message -> appMessage -> componentMessage
The <example-component> is not working because I haven't imported it properly.
How am I supposed to use Example component inside Blade template? Providing that I'm using Vue CDN and I want to keep the app declaration right on the Blade template for fancy data transformation (with Blade syntaxes) before passing it to component with appMessage in the middle?
I have been searching for documents. Some requires app declaration in resources/js/app.js, but if I follow this way, I can not pass data to app with Blade mustache syntax.
Update:
resources/js/app.js
import ExampleComponent from "./components/ExampleComponent.vue";
I have tried adding
<script src="{{mix('js/app.js')}}"></script>
And added components declaration in the instance:
components: {
'example-component': ExampleComponent,
}
But it is still not working (Invalid Component definition: ExampleComponent). Probably I missed some steps.
Silly me. I do not need to declare components property in the app Vue instance. Just specify the component that you are going to use in resources/js/app.js and that component will be available globally in Blade template.
Watch for syntax differences between Laravel Mix differences tho. It could be the problem (Vue template or render function not defined yet I am using neither?)
import ExampleComponent from './components/ExampleComponent.vue';
Vue.component('example-component', ExampleComponent);
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 new in Vuejs. I have the following code and i am getting an error. I am trying to pass a var into vue file.
What do i do wrong? And how can i achieve this?
App.js:
window.Vue = require('vue');
Vue.component('formlements' ,require('./components/formelements/Input.vue') );
const app = new Vue({
el: '#app'
});
Blade:
<formlements :testinfo="{somekey: 'someinfo'}"></formlements>
Vue file
<template>
<div class="container">
{{testinfo.somekey}}
</div>
</template>
Error:
Property or method "testinfo" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property
As per my comment, you have not defined props on your component or app. Even though you have bound the variable to the prop using :bind, it is still not accessible to the component.
All you need to do is declare the prop, e.g. props: { testinfo: Object }.
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');
}
},