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.
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>
Getting the error the error in the title, I am new to vue.js and I cannot figure it out
Cannot debug this for the life of me, can somebody help?
const app = new Vue({
el: '#location-box',
data: {
locations: [
{
name: "Europe",
desc: "Loren ipsum"
},
{
name: "America",
desc: "Loren ipsum"
}
],
},
})
My HTML:
<div id="location-section">
<div class="main-container">
<div class="location-grid-container">
<div id="info-box" class="outline">
</div>
<div>
<div id="location-box" v-for="location in locations" class="outline">
<h1>{{location.name}}</h1>
</div>
</div>
</div>
</div>
The root element that you pass to the el option of your new Vue app must be unique, and serve only as a placeholder.
Then you can use Vue directives on its children.
So in your case you could do:
<div id="location-section">
<div class="main-container">
<div class="location-grid-container">
<div id="info-box" class="outline">
</div>
<div id="location-box"><!-- Root element for your Vue app -->
<div v-for="location in locations" class="outline">
<h1>{{location.name}}</h1>
</div>
</div>
</div>
</div>
new Vue({
el: '#location-box',
// etc.
});
First project in Vue.js. Working with WP REST API.
I am able to get all my posts to show, but as soon as I try to implement the Vue-router my component that shows all the posts, home-post-list, dies at the first v-if="posts" statement.
Clearly, Vue thinks there is no posts so it isn't rendering anything else, but I cannot figure out how to make it recognize posts. I don't get any errors in the console.
WhenI look at the Vue DevTools, I see:
https://www.dropbox.com/s/5441k1kw8ocmzad/Screenshot%202018-05-22%2010.43.24.png?dl=0
So, the router-view appears to be working properly, but props is empty. I thought I was passing props from the main instance to the child component but maybe I am doing something wrong here.
I will show you my current code.
***HomePostList component
const HomePostList = Vue.component('home-post-list', {
props:['posts'],
template: `<div class="cell medium-8">
<div id="all-posts" class="all-posts" v-if="posts">
<div class="grid-x grid-margin-x">
<div class="post medium-6 cell" :class="{'medium-12':index===0}" v-for="(post,index) in posts">
<div class="img-bg" :class="{'first-post':index === 0}" :style="'background-image: url(' + post._embedded['wp:featuredmedia']['0'].source_url + ')'"></div>
<aside class="post-meta grid-x">
<div class="cell small-12">
<h3>{{ post.title.rendered | limitWords(6) }}</h3>
</div>
<div class="cell small-6">
<div class="post-category" v-for="(category,index) in post.cat_name.slice(0,1)">
<a :href="'/category/' + category.slug">{{ category.cat_name }}</a>
</div>
</div>
<div class="cell small-6">
<p><i class="fal fa-calendar-alt"></i> {{ post.date | parseTime }}</p>
</div>
</aside>
</div>
</div>
</div>
</div>`
});
***SinglePost Component
const SinglePost = Vue.component('single-post-template', {
props:['posts'],
template: `<div class="cell medium-8">
<div class="grid-x grid-margin-x">
<p>Single Post here</p>
</div>
</div>`
});
***Routes & Vue Instance
const routes = [
{
path: '/',
component: HomePostList,
props: true
},
{
path: '/post/:postId',
name: 'post',
component: SinglePost
}
];
const router = new VueRouter({
routes
});
new Vue({
el: '#app',
router,
data() {
return{
posts: [],
searchTerm:'',
searchPosts:[],
currentRoute: window.location.pathname
}
},
created (){
var $this = this;
axios
.get(apiRoot + 'posts?_embed')
.then(function (response) {
$this.posts = response.data;
}
)
},
methods: {
loadMorePosts: function(){
var $this = this;
axios
.get(apiRoot + 'posts?_embed')
.then(function (response) {
$this.posts = response.data;
}
)
},
},
computed:{
},
});
***index.php
<?php
/*
Template Name: Front
*/
get_header(); ?>
<!-- Home Page -->
<div class="grid-container">
<div class="grid-x grid-margin-x">
<!-- Main Post Container -->
<router-view></router-view>
<!-- Sidebar -->
<div id="sidebar" class="cell medium-4">
<sidebar-search></sidebar-search>
</div>
</div>
</div>
<?php get_footer();
I got this working by adding posts to the router-view element.
<router-view :posts="posts"></router-view>
Not sure if this is the correct way to do this, but it works.
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