I am working on a Vue application. I use bootstrap-vue navbar from this official example in my application. But, when I run my project, in the console, Vue keeps warning me about the unknown custom element <b-nav-brand> which I have included in my main.js.
Here is my set up if you have any ideas.
Error:
[Vue warn]: Unknown custom element: - did you register
the component correctly? For recursive components, make sure to provide
enter code here enter code here the "name" option.
Navbar Code:
<b-navbar class="nav-bar" toggleable="sm">
<b-navbar-toggle target="nav_collapse"></b-navbar-toggle>
<b-nav-brand class="logo" href="#">
<img src="/static/images/boost-icon.svg" alt="Boost icon"/>
<h1>Portal</h1>
</b-nav-brand>
<b-collapse is-nav id="nav_collapse">
<b-navbar-nav class="ml-auto">
<b-nav-item href="">
<span class="btn btn-primary btn-request-access">Request Access</span>
</b-nav-item>
</b-navbar-nav>
</b-collapse>
</b-navbar>
Main.JS:
Vue.use(BootstrapVue)
new Vue({
el: '#app',
router: router,
template: '<App/>',
store: store,
components: {
App
}
})
Because its <b-navbar-brand> in the docs.
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css"/>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.css"/>
<script src="//unpkg.com/babel-polyfill#latest/dist/polyfill.min.js"></script>
<script src="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.js"></script>
<div>
<!-- Image and text -->
<b-navbar variant="faded" type="light">
<b-navbar-brand href="#">
<img src="https://placekitten.com/g/30/30" class="d-inline-block align-top" alt="BV">
BootstrapVue
</b-navbar-brand>
</b-navbar>
</div>
You can also import it
import { BNavbar } from 'bootstrap-vue'
Vue.component('b-navbar', BNavbar)
or
import { NavbarPlugin } from 'bootstrap-vue'
Vue.use(NavbarPlugin)
On the bootstrap-vue docs they like to tell you how you can get started, import, at the bottom of the page.
Just import whatever you want to use.
Here is a sample code.
<script>
import {
BNavbarToggle, BNavItem, BNavbarBrand, BNavbar, BNavbarNav, BNavItemDropdown, BDropdownItem, BDropdownDivider, BAvatar, BCollapse, BNav, BContainer, BRow, BCol, BLink, BFormGroup, BFormInput, BInputGroupAppend, BInputGroup, BFormCheckbox, BCardText, BCardTitle, BImg, BForm, BButton,
} from 'bootstrap-vue'
export default {
components: {
BNavbarToggle,
BNavItem,
BNavbarBrand,
BNavbarNav,
BNavItemDropdown,
BDropdownItem,
BDropdownDivider,
BAvatar,
BCollapse,
BNavbar,
BNav,
BContainer,
BRow,
BCol,
BLink,
BFormGroup,
BFormInput,
BInputGroupAppend,
BInputGroup,
BFormCheckbox,
BCardText,
BCardTitle,
BImg,
BForm,
BButton,
},
}
</script>
Related
I created Vue 3, quasar project. everything worked fine till the moment I add new component. everything is rendering except the new component which I built and added it to the project. please help me with this problem if you can.
Here is my code:
index page:
<template>
<q-page class="flex flex-center">
<!-- section one-->
<SectionOne />
</q-page>
</template>
<script>
import { defineComponent } from "vue";
import SectionOne from "components/MainPage/SectionOne.vue";
export default defineComponent({
components: {
SectionOne,
},
name: "IndexPage",
});
</script>
Component:
<template>
<div class="q-pa-md q-gutter-md">
<div class="row justify-between">
<q-parallax src="https://cdn.quasar.dev/img/parallax2.jpg">
<h1 class="text-white">Basic</h1>
</q-parallax>
</div>
</div>
</template>
Not sure about your project structure, but try this (missing "./")
import SectionOne from "./components/MainPage/SectionOne.vue";
You can also import from the root 'src' like this:
import SectionOne from "src/components/MainPage/SectionOne.vue";
I have the following code in my app.js
const routes = [
{path:'/home', component:home},
{path:'/department', component:department},
{path:'/employee', component:employee}
]
const router = new VueRouter({
routes
})
const app = new Vue({
router
}).$mount('#app')
And this is how my index.html looks (I'm using Vue CDN):
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
</head>
<body>
<div id="app" class="container">
<h3 class="d-flex justify-content-center">
Vue JS Front End
</h3>
<h5 class="d-flex justify-content-center">
Employee Management Portal
</h5>
<nav class="navbar navbar-expand-sm bg-light navbar-dark">
<ul class="navbar-nav">
<li class="nav-item m-1">
<router-link class="btn btn-light btn-outline-primary"
to="/home">Home</router-link>
</li>
<li class="nav-item m-1">
<router-link class="btn btn-light btn-outline-primary"
to="/department">Department</router-link>
</li>
<li class="nav-item m-1">
<router-link class="btn btn-light btn-outline-primary"
to="/employee">Employee</router-link>
</li>
</ul>
</nav>
<router-view></router-view>
</div>
<script src="variables.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.0.0-alpha.1/axios.min.js"></script>
<script src="https://unpkg.com/vue#3"></script>
<script src="https://unpkg.com/vue-router#4"></script>
<script src="home.js"></script>
<script src="department.js"></script>
<script src="employee.js"></script>
<script src="app.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
</body>
</html>
I get the following error when opening index.html: "Uncaught TypeError: VueRouter is not a constructor"
I tried the solution provided by another post on SO, by adding the following to the top of my app.js file:
import VueRouter from 'vue-router';
Vue.use(VueRouter);
However, I then get the error "Uncaught SyntaxError: Cannot use import statement outside a module". Trying to fix this error seemed to get me in a rabbit hole. Is there a simple solution available for my original problem?
Your code is completely valid for Vue 2 and Vue Router 3, but you are using Vue 3 and Vue Router 4, which have a different syntax:
const router = VueRouter.createRouter({
history: VueRouter.createWebHashHistory(),
routes
})
const app = Vue.createApp({})
app.use(router)
app.mount('#app')
"vue": "^3.2.16",
"vue-router": "^4.0.12"
in app.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App)
.use(router)
.mount('#app')
in router/index.js
import {createRouter} from 'vue-router';
import { routesConfig } from "./routesConfig";
const routes = [...routesConfig]
const router = createRouter ({routes})
export default router
in routesConfig.js
import { Home } from "../views/home/routeConfig.js";
export const routesConfig = [
Home
]
in /views/home/routeConfig.js
export const Home = {
path: "/home",
name: "Home",
component: () => import("./index.vue")
};
department and employee like home route config
I'm new to Vue and am having some trouble with a few things. First, off I was following this tutorial: eventbus. If I put all the code (html, JS and CSS) in one html file, this works just as described in this tutorial.
However, I have been reading and I was following a VUE cli app structure. I used
vue init webpack vueapp01
So, I have an index.html file in the vueapp01 root folder, in the src folder I have an app.vue and two vue files in the components folder; the-box.vue and the-button.vue; along with all the other files loaded by the vue template webpack.
Instead of having all the code in one html file (which works) I have the code separated out like this:
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vueapp01</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
App.vue:
<template>
<div id="the-example" class="container">
<h1>Building an Event Bus with Vue.js</h1>
<div class="row">
<div class="col-xs-6">
<the-button what="Event #1"></the-button>
<the-button what="Event #2"></the-button>
<the-button what="Event #3"></the-button>
</div>
<div class="col-xs-6">
<the-box name="Receiver #1"></the-box>
</div>
</div>
</div>
</div>
</template>
<script>
import the-button from './components/the-button'
import the-box from './components/the-box'
export default {
name: 'app',
components: {
the-button,the-box
}
}
</script>
<--
<script>
/******************************************
The Central Event Bus Instance
*******************************************/
let EventBus = new Vue();
</script>
the-box.vue:
/******************************************
Example Root Vue Instance
*******************************************/
new Vue({el: "#the-example"});
/******************************************
A sample Vue.js component that emits an event
*******************************************/
let TheButton = Vue.extend({
name: "the-button",
props: ["what"],
template: `
<button class="btn btn-md btn-success the-button" #click="makeItHappen()">Sender: {{what}}</button>
`,
methods: {
makeItHappen: function(){
EventBus.$emit("somethingHappened", this.what)
}
}
});
Vue.component("the-button", TheButton);
the-button.vue:
/******************************************
A sample Vue.js component that received an event
*******************************************/
let TheBox = Vue.extend({
name: "the-box",
props: ["name"],
template: `
<div class="well">
<div class="text-muted">{{name}}</div>
<div>{{respondedText}}</div>
</div>
`,
data: function(){
return {
respondedText: null
}
},
created: function(){
EventBus.$on('somethingHappened', (what)=>{
this.respondedText = 'Event Received: ' + what;
})
console.log("Responder")
}
});
Vue.component("the-box", TheBox);
Currently, I'm getting the errors, "unknown custom element the-box", "unknown custom element the-button". I've tried switching the script and template orders to have templates load first but I still have no luck.
Any help would be greatly appreciated. Also, I assume I'm doing this correctly by separating these components out to separate files but if that is incorrect I'd gladly take criticism on the way I'm learning to use Vue.
Change:
import the-button from './components/the-button'
import the-box from './components/the-box'
to
import TheButton from './components/the-button'
import TheBox from './components/the-box'
and do
components: {
TheButton,
TheBox,
}
There must be another far larger error somewhere you're somehow not seeing.
Here is a full example of how the files should look to implement that fiddle in single file components assuming you used vue init webpack <project>.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>bus</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
main.js
import Vue from 'vue'
import App from './App'
Vue.config.productionTip = false
window.EventBus = new Vue()
new Vue({
el: '#app',
template: '<App/>',
components: { App }
})
App.vue
<template>
<div id="the-example" class="container">
<h1>Building an Event Bus with Vue.js</h1>
<div class="row">
<div class="col-xs-6">
<the-button what="Event #1"></the-button>
<the-button what="Event #2"></the-button>
<the-button what="Event #3"></the-button>
</div>
<div class="col-xs-6">
<the-box name="Receiver #1"></the-box>
<the-box name="Receiver #2"></the-box>
<the-box name="Receiver #3"></the-box>
</div>
</div>
</div>
</template>
<script>
import TheButton from './components/TheButton.vue'
import TheBox from './components/TheBox.vue'
export default {
name: 'app',
components: {
TheButton, TheBox
}
}
</script>
components/TheBox.vue
<template>
<div class="well">
<div class="text-muted">{{name}}</div>
<div>{{respondedText}}</div>
</div>
</template>
<script>
export default {
name: "the-box",
props: ["name"],
data: function(){
return {
respondedText: null
}
},
created: function(){
EventBus.$on('somethingHappened', (what)=>{
this.respondedText = 'Event Received: ' + what;
})
console.log("Responder")
}
}
</script>
components/TheButton.vue
<template>
<button class="btn btn-md btn-success the-button" #click="makeItHappen()">Sender: {{what}}</button>
</template>
<script>
export default {
name: "the-button",
props: ["what"],
methods: {
makeItHappen: function(){
EventBus.$emit("somethingHappened", this.what)
}
}
}
</script>
I am using vue.js to create a navigation task bar along with bootstrap for the frontend framework.
I configured the router in a router.js file I created.
router.js
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
//enter code here`import components
import levi from './containers/levi'
import product from './containers/product'
import price from './containers/price'
//application routes
const routes = [
{path: '/', component: levi },
{path: '/product', component: product },
{path:'/price', component: price }
]
//export router instance
export default new Router({
mode: 'history',
routes,
linkActiveClass:'is-active'
})
I created the containers with the files for the navigation bar.
price.vue
<template>
<div id = "price" >
What is the price!
</div>
</template>
<script>
export default{
name: 'price'
}
</script>
<style scoped>
</style>
product.vue
<template>
<div id = "product">
Understanding the levi product
</div>
</template>
<script>
export default {
name: 'product'
}
</script>
<style scoped>
</style>
The components folder has the navigation component
<template>
<div>
<div class="navbar navbar-default navbar-static-top">
<div class="container ">
levi
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" name="button">
<span class="navbar-toggle-Menu">Menu</span>
</button>
<div class="collapse navbar-collapse"></div>
</div>
</div>
</div>
</template>
This div section contains the router-link tags that are not working properly
<div class="nav navbar-nav navbar-right">
<router-link to='/product'> product </router-link>
</div>
end tag for the router-link
<template></template>
<script>
export default {
name : 'navigation'
}
</script>
<style scoped = "true">
</style>
All the initial navigation links are no longer showing when I surround them with the router-link. How can I fix this?
You need to pass the instance of your router to your main Vue instance like so:
//your router is declared as default in its own file so
//in your main Vue instance...
import router from './my_router'
new Vue({
el: '#app',
router
})
In a laravel 5.4 environment I want to render the text "Example" in the .panel-heading of Example.vue. After doing npm run watch I get the following Vue warn:
'Property or method "message" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.'
app.js
require('./bootstrap');
window.Vue = require('vue');
Vue.component('example', require('./components/Example.vue'));
const app = new Vue({
el: '#app',
data: {
message: 'Example'
}
});
Example.vue
<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" >{{ message }}</div>
<div class="panel-body">
I'm an example component!
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.')
}
}
</script>
app.blade.php
<html>
<!-- ... -->
<body>
<div id="app">
<example></example>
</div>
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
Your Example.vue component doesn't have access to its parent's properties. You need to define message within the same scope of the component you are trying to use it in.
You can do this by adding message as a data property in your Example component:
// Example.vue script
export default {
data() {
return {
message: 'Example',
}
},
}
Or you can pass it in as a prop:
// Example.vue script
export default {
props: ['message'],
}
In your case, you would pass a value for the message prop like this:
// in app.blade.php
<example message="Example"></example>
Here's the documentation on Vue Component props.