I have two components in my Vue, 'navbar' and 'articles'. 'articles' is working fine, 'navbar' is not. I am getting the error of "unknown custom element : did you register the component correctly?"
Here is my code.
Navbar.vue
<template>
<nav class="navbar navbar-expand-sm navbar-dark bg-info mb-2">
<div class="container">
Testing Vue
</div>
</nav>
</template>
app.js
Vue.component('navbar', require('./components/Navbar.vue'));
Vue.component('articles', require('./components/Articles.vue'));
const app = new Vue({
el: '#app'
});
blade.php
<body>
<div id="app">
<navbar></navbar>
<div class="container">
<articles></articles>
</div>
</div>
<script src="{{asset('js/app.js')}}"></script>
</body>
Your Navbar.vue has no model. You cannot only use a template. You need a default export (or, as you're using require, module.exports):
<template>
<nav class="navbar navbar-expand-sm navbar-dark bg-info mb-2">
<div class="container">
Testing Vue
</div>
</nav>
</template>
<script>
module.exports = {
name: 'navbar',
data: function() {
return {}
}
}
</script>
Related
I am a beginner at Vue.js and i am having trouble creating my first component , I gave my component a name and i think i register it correctly but i am having the Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option. error .
What am i missing
Here is my FirstComponent.vue
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Title</div>
<div class="card-body">
Send it from Vue Js
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "firstcomponent",
mounted() {
console.log("Component mounted successfully");
}
}
</script>
<style scoped>
</style>
My app.js
require('./bootstrap');
import Vue from 'vue';
import FirstComponent from "./components/FirstComponent";
// window.Vue = require('vue');
Vue.component('firstcomponent', require('./components/FirstComponent.vue'));
new Vue({
el: '#app',
components: {
'firstcomponent': FirstComponent
}
})
And my blade
#extends('layouts.app')
#section('content')
<template>
<div class="flex-center position-ref full-height">
<div class="content">
<firstcomponent></firstcomponent>
</div>
</div>
</template>
#endsection
In app.js, you should define which should be exported from the component. Use default will work fine:
Vue.component('firstcomponent', require('./components/FirstComponent.vue').default);
i have succeed create router link in v-if but the url is does not change, what is expected is url change so if user click "go back one page" it is goes to previews page
<template>
<div class="container-fluid">
<div class="row" v-if="productAllData">
<div v-for="item in productAll" :key="item._id" class="col-md-2 col-xs-6">
<div class="card card-margin-right card-buttom" #click="clickProductById(item._id)">
<img v-bind:src="item.image[0].filename" />
<div class="card-body">
<h5 class="card-title">{{item.name}}</h5>
<p>
{{item.description}}<br>
<span class="font-weight-bold">{{item.fprice}} / {{item.unit}}<br></span>
stock : {{item.quantity}}<br>
</p>
</div>
</div>
</div>
</div>
<product-by-id :id="id" :test="`/productall/${id}`" v-if="productByIdData">
<router-link :to="`/productall/${id}`"></router-link>
</product-by-id>
</div>
</template>
in above code there is router link in v-if
<product-by-id :id="id" :test="`/productall/${id}`" v-if="productByIdData">
<router-link :to="`/productall/${id}`"></router-link>
</product-by-id>
and that code is working, since if i console log there is "/productall/603aaaf5dead94fee94d2811"
but why my url is not change still "http://localhost:8080/productall" what i expected is "http://localhost:8080/productall/603aaaf5dead94fee94d2811"
I set up an example routing implementation. A couple of components with a router configuration.
/router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter);
import Home from '#/components/stackoverflow/router-params-example/Home'
import ProductAll from '#/components/stackoverflow/router-params-example/ProductAll'
const routes = [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/productall/:id',
name: 'productall',
component: ProductAll,
props: true
}
]
export default new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
App.vue
<template>
<div id="app" class="container">
<router-view></router-view>
</div>
</template>
Home.vue
<template>
<div class="parent">
<h4>Home</h4>
<div class="row">
<div class="col-md-6">
<router-link class="btn btn-primary" :to="{ name: 'productall', params: { id: productId } }">Product All</router-link>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
productId: '603aaaf5dead94fee94d2811'
}
}
}
</script>
ProductAll.vue
<template>
<div class="product-all">
<h4>Product All</h4>
<div class="row">
<div class="col-md-6">
<router-link class="btn btn-secondary" :to="{ name: 'home' }">Back</router-link>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
id: {
type: String,
required: true
}
}
}
</script>
I have made a Vue CLI project and then started making my project.
I have made the following component named Navigation.vue:
<template>
<nav>
<div class="nav_container">
<ul>
<li><router-link to="/home">Home</router-link></li>
<li class="dropdown">
<a class="touch"
>Network Settings <i class="fas fa-angle-down"></i
><i class="fas fa-angle-up"></i
></a>
<div class="dropdown-content">
<router-link to="/dhcpIP">DHCP IP</router-link>
<router-link to="/staticIP">Static IP</router-link>
</div>
</li>
<!-- <li><router-link to="/files">Import/Export Files</router-link></li> -->
<li><router-link to="/update">Update</router-link></li>
</ul>
</div>
</nav>
</template>
<script>
export default {
name: 'Navigation',
}
</script>
<style scoped>
/* Some style */
</style>
I have then imported it in App.vue:
<template>
<div id="app">
<Navigation />
<router-view />
</div>
</template>
<script>
import Navigation from "./components/Navigation.vue";
</script>
<style scoped>
/* Some style */
</style>
finally I have main.js which I haven't modified:
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App)
}).$mount('#app')
and I get the following error:
ERROR Failed to compile with 1 errors 8:10:25 PM
error in ./src/App.vue
Module Error (from ./node_modules/eslint-loader/index.js):
\App.vue
9:8 error 'Navigation' is defined but never used no-unused-vars
The component is clearly used, yet I receive that error. I don't understand why.
You are importing Navigation but never use it on your script, declare it as component:
<template>
<div id="app">
<Navigation />
<router-view />
</div>
</template>
<script>
import Navigation from "./components/Navigation.vue";
export default {
components: {
Navigation
},
}
</script>
<style scoped>
/* Some style */
</style>
I have a component for my bootstrap modal. The modal has a button is labeled "Got It",which I am trying to call a method found on the root instance. It is not working--I cannot tell what I am missing. I have added a click handler and emit the click, but cannot trigger the clear function? Please advise what is wrong- thanks
Vue.component('modal', {
template: '#modal-template',
props:{
bgClass:{
type:String,
default:'default'
},
},
methods: {
clickHandler () {
this.$emit('click');
}
}
})
new Vue({
el: "#app",
data: function data() {
return{
showModalZ:false
}
},
methods: {
clear: function(){
alert("checkme");
}
}
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<script type="text/x-template" id="modal-template">
<transition name="modal">
<div class="vm-modal-mask">
<div class="vm-modal-wrapper">
<div class="vm-modal-container">
<div class="vm-modal-header">
<slot name="header">
default header
</slot>
</div>
<div :class="bgClass" class="vm-modal-body">
<slot name="body">
default body
</slot>
</div>
<div class="vm-modal-footer">
<slot name="footer">
<button class="modal-default-button btn btn-primary" #click="clickHandler(),clear()">
Got It!
</button>
</slot>
</div>
</div>
</div>
</div>
</transition>
</script>
<div id="app">
<h5>hello <i style="font-size:20px;cursor:pointer;" aria-hidden="true" class="fa fa-info-circle" v-on:click="showModalZ=true"></i></h5>
<modal v-if="showModalZ" #close="showModalZ = false">
<h5 slot="header"><strong>input goes here</strong></h5> <hr>
<div>
test
</div>
</modal>
</div>
simply use this.$parent.$root.methodname()
e.g this.$parent.$root.clear();
Vue.component('modal', {
template: '#modal-template',
props: {
bgClass: {
type: String,
default: 'default'
},
},
methods: {
clickHandler() {
this.$parent.$root.clear();
}
}
})
new Vue({
el: "#app",
data: function data() {
return {
showModalZ: false
}
},
methods: {
clear: function () {
alert("checkme");
}
}
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<script type="text/x-template" id="modal-template">
<transition name="modal">
<div class="vm-modal-mask">
<div class="vm-modal-wrapper">
<div class="vm-modal-container">
<div class="vm-modal-header">
<slot name="header">
default header
</slot>
</div>
<div :class="bgClass" class="vm-modal-body">
<slot name="body">
default body
</slot>
</div>
<div class="vm-modal-footer">
<slot name="footer">
<button class="modal-default-button btn btn-primary" #click="clickHandler()">
Got It!
</button>
</slot>
</div>
</div>
</div>
</div>
</transition>
</script>
<div id="app">
<h5>hello <i style="font-size:20px;cursor:pointer;" aria-hidden="true" class="fa fa-info-circle" v-on:click="showModalZ=true"></i></h5>
<modal v-if="showModalZ" #close="showModalZ = false">
<h5 slot="header"><strong>input goes here</strong></h5> <hr>
<div>
test
</div>
</modal>
</div>
You need to emit 'close' event from model component clickHandler function and capture it on parent with #close
Working example:
Vue.component('modal', {
template: '#modal-template',
props: {
bgClass: {
type: String,
default: 'default'
}
},
methods: {
clickHandler() {
this.$emit('close');
}
}
})
new Vue({
el: "#app",
data: function data() {
return {
showModalZ: false
}
},
methods: {
clear: function() {
alert("checkme");
}
}
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.min.js"></script>
<script type="text/x-template" id="modal-template">
<transition name="modal">
<div class="vm-modal-mask">
<div class="vm-modal-wrapper">
<div class="vm-modal-container">
<div class="vm-modal-header">
<slot name="header">
default header
</slot>
</div>
<div :class="bgClass" class="vm-modal-body">
<slot name="body">
default body
</slot>
</div>
<div class="vm-modal-footer">
<slot name="footer">
<button class="modal-default-button btn btn-primary" #click="clickHandler">
Got It!
</button>
</slot>
</div>
</div>
</div>
</div>
</transition>
</script>
<div id="app">
<h5>hello <i style="font-size:20px;cursor:pointer;" aria-hidden="true" class="fa fa-info-circle" v-on:click="showModalZ=true"></i></h5>
<modal v-if="showModalZ" #close="showModalZ = false">
<h5 slot="header"><strong>input goes here</strong></h5>
<hr>
<div>test</div>
</modal>
</div>
I have a simple Vue.Js App I need to render but the app is not being rendered at all.
I followed all the examples shown online and everything looks correct but I can't spot the problem. I am using Vue.js on an ASP.net application with webpack
My Index.cshtml:
#section scripts{
<environment names="Development,Production,Staging">
<script src="~/dist/js/home/bundle.js" asp-append-version="true"></script>
</environment>
}
<div id="app">
</div>
My main app.js:
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.config.performance = true;
Vue.use(VueRouter);
import store from './store/store';
import { router } from './router/router';
import App from './App.vue';
new Vue({
el: '#app',
store,
router,
render: h => h(App)
});
My App.vue:
<template>
<div>
<div class="container">
<div class="columns">
<div class="column is-3">
<section class="section">
<aside class="menu">
<p class="menu-label">
Examples
</p>
<ul class="menu-list">
<li>
<router-link :to="{ name: 'counter' }">Counter</router-link>
</li>
</ul>
<p class="menu-label">
About
</p>
<ul class="menu-list">
<li>
<router-link :to="{ name: 'moduleinfo' }">Module info</router-link>
</li>
</ul>
</aside>
</section>
</div>
<div class="column is-9">
<section class="section">
<transition name="component-fade"
mode="out-in">
<router-view></router-view>
</transition>
</section>
</div>
</div>
</div>
<notifications group="global" />
</div>
</template>
<script>
import Vue from 'vue'
import Notifications from 'vue-notification'
Vue.use(Notifications)
export default {
name: 'App'
}
</script>
<style scoped>
</style>
There are no errors being thrown, the app simply doesnt render and the only html on the page when i run the application is
<div id=app>
</div>