I registered component in my app.js like this:
Vue.component('navbar', require('./components/Navbar.vue'));
Now I want to import that component:
<template>
<nav class="navbar">CODE HERE</nav>
</template>
Into my blade.php file:
<body class="">
<div id="app">
<div class="">
<navbar></navbar> <-- here!
#yield('content')
</div>
</div>
</body>
What's the easiest way to do this?
In app.js
import navbar from './components/Navbar.vue';
Vue.component('navbar', require('./components/Navbar.vue'));
var app = new Vue({
el: '#app',
components: {
'navbar': require('./components/Navbar.vue'),
}
});
In your blade:
<body class="">
<div id="app">
<div class="">
<navbar></navbar>
#yield('content')
</div>
</div>
It's an old thread, but: don't forget to run npm run dev to compile the app.js
Related
I am starting to learn vue.js and the following problem has been presented to me, I am creating an SFC and when exporting the images inside the folder src / assets / logo.png I do not load the image, this is the code:
<template>
<div id="app">
<div class="row">
<img :src="imagen" alt="" id="">
<div class="col s12 m4">
<your-list></your-list>
</div>
</div>
</div>
</template>
<script>
import YourList from './components/YourList'
export default {
name: 'app',
components: {
'your-list': YourList
},
data() {
return{
imagen: './assets/logo.png'
}
}
}
</script>
<style lang="scss">
</style>
The solution I have found is to import the logo in the following way:
<template>
<div id="app">
<div class="row">
<img :src="imagen" alt="" id="">
<div class="col s12 m4">
<your-list></your-list>
</div>
</div>
</div>
</template>
<script>
import YourList from './components/YourList'
export default {
name: 'app',
components: {
'your-list': YourList
},
data() {
return{
imagen: './assets/logo.png'
}
}
}
</script>
<style lang="scss">
</style>
I added an import to bring the image and be able to show it, my doubt would be if I have to use 20 images I would have to do it that way, I do not know if it is the most optimal way. I'm using # vue/cli
You can use require to make webpack resolve it correctly.
data() {
return {
imagen: require('./assets/logo.png')
}
}
I have created a file EmptyComponent.html to show a Vue.js component (myComponent.vue) both files are in the same folder. my component will not show and I am always getting an error in chrome developer tools console saying "Uncaught SyntaxError: Unexpected identifier EmptyComponent.html:8"
EmptyComponent.html
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script>
<div id="app">
<h1> id app div </h1>
<myComponent></myComponent>
</div>
<script>
import myComponent from 'myComponent.vue'
new Vue({
el: '#app',
components: {myComponent}
});
</script>
myComponent.vue
<template>
<div>
<h1> myComponent div</h1>
</div>
</template>
<script>
export default {
name: 'myComponent'
</script>
<style scoped>
</style>
In order to use single file components .vue you should use Vue cli 3, but your component does not contain a complex code you could use CDN and declare your component using Vue.component('my-component',{....}) :
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script>
<div id="app">
<h1> id app div </h1>
<my-component></my-component>
</div>
<script>
Vue.component('my-component', {
template: ` <div>
<h1> myComponent div</h1>
</div>`
})
new Vue({
el: '#app',
});
</script>
I'm trying to output a Vue.js component on my page, I was following the documentation but I'm getting the following error -
[Vue warn]: Unknown custom element: <contacts> - did you register the component correctly?
This is my code:
require('./bootstrap');
window.Vue = require('vue');
Vue.component('contacts', require('./components/Contacts.vue'));
const app = new Vue({
el: '#app'
});
The component code:
<template>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">Contacts list</div>
<div class="panel-body">
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.')
}
}
</script>
My blade file:
<div class="container">
<contacts></contacts>
</div>
Apologies, I was running npm run watch so that's why the VueJS Component wasn't loading.
I'm having trouble running components using Vue. I don't know if I'm using the correct CDN links, but it seems like it's not working at all.
Template
<div id="app">
<button v-on:click="showing = !showing">show or hide</button>
<transition name="slide-fade" tag="div">
<div v-if="showing">Hello!</div>
</transition>
<weather-meter></weather-meter>
</div>
<script type="text/x-template" id="weather-meter-template">
<div>
Today's high: {{high}}
<div class="pointer" v-bind:style:="{width: showHigh}"></div>
How we feel about this: {{ourFeelings}}
</div>
</script>
Javascript
new Vue({
el:'app',
data: function(){
return{
showing: true
}
}
});
Vue.component("weather-meter", {
template:"#weather-meter-template",
data:function (){
return{
high:40,
shownHigh: 40,
ourFeelings: "meh"
}
These are the CDN scripts I'm using as well.
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.4/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script>
When I try passing props to attributes of HTML elements in .vue files, they just stop rendering. What am I doing wrong?
script.js
import hInput from './components/hInput.vue'
Vue.component('h-input', hInput);
const app = new Vue({
el: '#head',
});
index.php
<div id="head">
<h1>{{config('app.name')}}</h1>
<h-input placeholder="Hi" name="hello"></h-input>
</div>
hInput.vue
<template>
<div>
<input type="text" placeholder="{{placeholder}}">
</div>
</template>
<script>
export default {
props: ['placeholder', 'name']
};
</script>
Use the binding syntax, not text interpolation.
<template>
<div>
<input type="text" v-bind:placeholder="placeholder">
</div>
</template>
There is also a shorthand.
<template>
<div>
<input type="text" :placeholder="placeholder">
</div>
</template>