Vuejs - Failed to mount component: template or render function not defined - vue.js

I am unsure what I am doing wrong. I get the below error:
error message in console:
[Vue warn]: Failed to mount component: template or render function not defined.
found in
---> <VueChartjs>
<Chatjsvue> at src\components\vueChartjs\Chatjsvue.vue
<App> at src\App.vue
<Root>
index.js
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '#/components/HelloWorld'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
// component: HelloWorld
component: require('../components/HelloWorld.vue').default
}
]
})
App.vue
<template>
<div id="app" class="container">
<img src="./assets/logo.png" class="logo">
<!-- chartjs -->
<div class="chartjsvue">
<Chatjsvue></Chatjsvue>
</div>
<div class="clear"></div>
<!-- chartjs -->
</div>
</template>
<script>
import Chatjsvue from '#/components/vueChartjs/Chatjsvue'
export default {
name: 'App',
components: {
Chatjsvue
}
}
</script>
Chatjsvue.vue
<template src="../../views/chartjshtml/chartsjs.html"></template>
<script>
import Chartjsvue from '#/assets/javascripts/chartjs'
export default {
components: {
'vue-chartjs': Chartjsvue
}
};
</script>
chartsjs.html
<div class="wrapper">
<vue-chartjs></vue-chartjs>
</div>
chartjs.js
file is rmpty- no code in the file
What is the error referring to and what needs to be done to resolve it?

I think the problem is your chartjs.js is empty. You need to do:
import template from './chartjs.html' // in your questions it's chartsjs.html, please help to correct it
export default {
template: template
}

Your chartjs.js file shouldn't be empty. It should be a Vue component with a template that can be rendered. Any javascript can be written within the script tags themselves.
The components object should only contain the list of vue components you need to use in the current component. And each component must have a template.

Thank you to everyone who contributed in answering. The js file should not be empty. This is the complete code to display all the charts for chartjs
main.js [src/main.js]
import Vue from 'vue'
import App from './App'
import router from './router'
import ChartJsPluginDataLabels from 'chartjs-plugin-datalabels'
Vue.config.productionTip = false
require('./assets/stylesheets/application.css')
require('./assets/javascripts/application.js')
require('./assets/javascripts/chartjs.js')
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: {
App,
ChartJsPluginDataLabels
},
template: '<App/>'
})
App.vue [src/App.vue]
<template>
<div id="app" class="container">
<!-- chartjs -->
<div class="chartjsvue tab-content active" id="tab2">
<Chatjsvue></Chatjsvue>
</div>
<div class="clear"></div>
<!-- chartjs -->
</div>
</template>
<script>
import Chatjsvue from '#/components/vueChartjs/Chatjsvue'
export default {
name: 'App',
components: {
Chatjsvue
}
}
</script>
Chatjsvue.vue [src/components/Chatjsvue.vue]
<template src="../../views/chartjshtml/chartsjs.html"></template>
<script>
import Chartjsbarvue from '#/assets/javascripts/chartjsbar'
export default {
components: {
'vue-chartbarjs': Chartjsbarvue
},
mounted(){
console.log('Data is chartjs',this)
},
methods: {},
}
</script>
chartsjs.html [src/views/chartjshtml/chartsjs.html]
<div class="wrapper">
<div class="chart_header">chartjs bar chart</div>
<vue-chartbarjs></vue-chartbarjs>
</div>
chartjsbar.js [src/assets/javascripts/chartjsbar.js]
/*===================================================
File: Chartsjsvue.vue
===================================================*/
import { Bar } from 'vue-chartjs'
export default {
extends: Bar,
data () {
return {
datacollection: {
labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
datasets: [
{
label: '1st Dataset hello',
backgroundColor: 'rgba(52,65,84, 0.3)',
bordercolor: '#344154"',
hoverBackgroundColor: "#344154",
data: [40, 20, 12, 39]
},
{
label: '2nd Dataset',
backgroundColor: 'rgba(130,191,163, 0.5)',
bordercolor: '#82BFA3"',
hoverBackgroundColor: "#82BFA3",
data: [50, 70, 22, 55]
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
datalabels: {
display: false
}
}
}
}
},
mounted () {
this.renderChart(this.datacollection, this.options)
}
}

Related

Seperate Dashbord and Forum Component From App component in vuejs

Is there a way to mount multiple components on a single vue instance.
I have my admin dashboard and a forum page and i don't want header and navigation to show up on these pages.
Here's what I've tried:
import App from "./App.vue";
import Admin from "./Admin.vue";
import Forum from "./Forum.vue";
const app = new Vue({
router,
store,
components: {
App, Admin, Forum
}
}).$mount("#app");
Then in my App.vue, I have other child components
<template>
<div>
<div class="general-page">
<AppHeader></AppHeader>
<transition name="fade">
<router-view></router-view>
</transition>
<AppFooter></AppFooter>
</div>
</div>
</template>
<script>
import AppHeader from "./components/AppHeader";
import Login from "./components/Login.vue";
import Register from "./components/Register.vue";
import AppFooter from "./components/AppFooter.vue";
export default {
components: {
AppHeader,
Login,
Register,
AppFooter
}
};
</script>
In Forum.vue
<template>
<div>
<div class="forum-page">
<ForumHeader></ForumHeader>
<transition name="fade">
<router-view></router-view>
</transition>
<ForumFooter></ForumFooter>
</div>
</div>
</template>
<script>
import ForumHeader from "./components/ForumHeader";
import ForumFooter from "./components/ForumFooter.vue";
export default {
components: {
ForumHeader,
ForumFooter
}
};
</script>
Admin.vue
<template>
<div>
<div class="admin-page">
<AdminHeader></AdminHeader>
<transition name="fade">
<router-view></router-view>
</transition>
<AdminFooter></AdminFooter>
</div>
</div>
</template>
<script>
import AdminHeader from "./components/AdminHeader";
import AdminFooter from "./components/AdminFooter.vue";
export default {
components: {
AdminHeader,
AdminFooter
}
};
</script>
Routes for Forum and Admin
{
path: '/admin',
name: 'Admin',
component: Admin,
meta: {
requiresAuth: true
},
children: [
{
path: '',
name: 'Profile',
component: Profile
},
{
path: 'uploads',
name: 'Uploads',
component: Uploads,
meta: {
requiresCreatorAccess: true
}
},
{
path: 'add-post',
name: 'AddPost',
component: AddPost,
meta: {
requiresCreatorAccess: true
}
}
]
},
{
path: '/forum',
name: 'Forum',
component: Forum,
children: [
{
path: '',
name: 'Channel',
component: Channel
},
{
path: 'threads',
name: 'Threads',
component: Threads
},
{
path: 'topic',
name: 'Topic',
component: Topic
}
]
},
How do I dynamically go to each route and mount each component on el: #app ?
Without changing any routing and template structure, you could use CSS to hide the app header, footer.
Another option may be to v-if the app header,footer to not render when on those routes using something like $router.currentRoute for matching.
CSS
/*
Assuming app header and footer have an id attribute
Change to your needs
*/
#app-header,
#app-footer {
display: none;
}
v-if on currentRoute
We have to do a few of things here.
Create a data variable (showMe: true)
Create a method (evaluateShowMe)
Create a watcher for the route ('$route'()) Be aware of the quotes!
Note: Feel free to rename the variable and function to suit your needs.
We need to watch $route because this is outside of a <router-view/> so we need to do this dynamically so the variable performs the evaluator function every time the route changes.
App.vue:
<template>
<div>
<div class="general-page">
<AppHeader
v-if="showMe"
></AppHeader>
<transition name="fade">
<router-view></router-view>
</transition>
<AppFooter
v-if="showMe"
></AppFooter>
</div>
</div>
</template>
<script>
import AppHeader from "./components/AppHeader";
import Login from "./components/Login.vue";
import Register from "./components/Register.vue";
import AppFooter from "./components/AppFooter.vue";
export default {
components: {
AppHeader,
Login,
Register,
AppFooter
},
data() {
return {
showMe: true
}
},
methods: {
evaluateShowMe() {
// Get the substring of the path between first and second slash
// This will allow to include any child pathing
// NOTE: In my test the first index ([0]) was empty so used one ([1]) for the `filter`
const entryPath = this.$router.currentRoute.path.split('/').filter((x,i) => i === 1);
// We want to exclude the following paths i.e. hide when on these
// There should only be one item in the array so we extract with `[0]`
return (entryPath[0] !== 'admin' || entryPath[0] !== 'forum');
}
},
watch: {
'$route'() {
this.showMe = this.evaluateShowMe();
}
}
};
</script>

I can not move another path in Vue JS

Im new to Vue JS and I'm making a simple page in Vue JS. Here are my codes:
main.js
import Vue from 'vue'
import App from './App.vue'
import PokeProfile from './components/PokeProfile.vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import VueRouter from 'vue-router';
Vue.use(VueRouter)
Vue.use(ElementUI)
const router = new VueRouter({
routes: [
{path: '/', component: App},
{path: '/pokemon/:id', component: PokeProfile},
],
mode: 'history'
})
//Vue.config.productionTip = false
new Vue({
el: '#app',
render: h => h(App),
router: router
})
App.js
<template>
<div id="app">
<div class="tag-group">
<el-tag
v-for="pokemon in pokemons"
:key="pokemon.national_id"
:type="pokemon.name"
effect="plain">
<poke-item :pokemon=pokemon></poke-item>
</el-tag>
</div>
</div>
</template>
<script>
import PokeItem from './components/PokeItem.vue'
import axios from 'axios'
export default {
name: 'app',
components: {
PokeItem
},
data() {
return {
pokemons: []
}
},
created() {
axios.get("http://localhost:3000")
.then(res => this.pokemons = res.data)
.catch(err => {console.log(err)})
}
}
</script>
<style>
div {
display: flex;
justify-content: center;
}
</style>
PokeItem.js
<template>
<div>
<router-link :to="pokemonLink">
{{pokemon.name}}
</router-link>
</div>
</template>
<script>
export default {
data() {
return {}
},
props: {
pokemon: {
type: Object,
required: true
}
},
computed: {
pokemonLink() {
return `/pokemon/${this.pokemon.national_id}`
}
}
}
</script>
PokeProfile.js
<template>
<h1>Hello Pokemon</h1>
</template>
<script>
export default {
}
</script>
The problem here is I can not move to PokeProfile.js when I click on an item in the PokeItem.js file. What could be the problem? I've checked the section of the code related to routing but I didn't see any problem.
Vue-Router uses a dynamic component (<router-view>) to render the components of your routes. Usually you will find this component in the template of your app.vue. Since you have no <router-view> component Vue-Router does not know where to render your route components.
Try this:
// main.js
import Home from './components/Home.vue'
const router = new VueRouter({
routes: [
{path: '/', component: Home},
{path: '/pokemon/:id', component: PokeProfile},
],
mode: 'history'
})
// components/Home.vue
// your old App.vue
// ./App.vue
<template>
<main>
<router-view></router-view>
</main>
</template>

Vue.js : "$scrollTo" is not defined in inner template

When I am using another template (Header.vue) inside the main template Index.vue, it throws an error "$scrollTo" is not defined.
Note : $scrollTo is provided by the module "vue2-scrollspy" which I have installed.
However if I paste the entire code of Header.vue inside Index.vue it works fine.
Index.vue
<template>
<div class="scroll-div">
<mainheader></mainheader>
</div>
</template>
<script>
import mainheader from './Header.vue'
export default {
name: 'MyApplication',
components:{
mainheader
}
}
</script>
Header.vue
<template>
<div class="main-Header">
<b-navbar toggleable="md" type="dark" variant="dark" fixed="top">
<div class="container">
<b-navbar-brand #click="$scrollTo(0)"></b-navbar-brand>
</div>
</b-navbar>
</div>
</template>
<script>
export default {
name : 'mainheader',
data () {
return {
msg: 'Welcome to SportsBee',
scrollPos: 0
}
}
}
</script>
index.js
import Scrollspy from 'vue2-scrollspy';
Vue.use(Scrollspy);
Vue.use(VueAxios, axios);
Vue.use(VueRouter)
const router = new VueRouter({
routes: [
{
path: '/',
name: 'index',
component: index
}
], mode:"history"
})
export default router;
main.js
import Vue from 'vue'
import App from './App'
import router from './router'
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})

vuejs Incorrect component definition

I have two components - 'HelloIndex' and 'HelloShow'.
The problem is that when I try to do this
this.$router.push({name: 'HelloShow', params: {id: 1}})
, then the 'HelloIndex' component is loaded instead of 'HelloShow'.
In my router:
import Vue from 'vue'
import Router from 'vue-router'
import HelloIndex from '#/components/HelloIndex'
import HelloShow from '#/components/HelloShow'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/index',
name: 'HelloIndex',
component: HelloIndex,
children: [
{
path: ':id/show',
name: 'HelloShow',
component: HelloShow
}
]
}
]
})
HelloIndex.vue:
<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'helloIndex',
data () {
return {
msg: 'INDEX'
}
}
}
</script>
HelloShow.vue:
<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'helloShow',
data () {
return {
msg: 'SHOW'
}
}
}
</script>
App.vue
<template>
<div id="app">
<button #click="show">show</button>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'app',
methods: {
show () {
this.$router.push({name: 'HelloShow', params: {id: 1}})
}
}
}
</script>
main.js
import Vue from 'vue'
import App from './App'
import router from './router'
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})
What's wrong with the names of the components?
Parent component which has children should contain <router-view></router-view> in <template> tag. Your HelloIndex.vue file can look like:
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'helloIndex',
data () {
return {
msg: 'INDEX'
}
}
}
</script>
If you want to have both components at the same level, so HelloShow won't be a child of HelloIndex you might want to edit your routes.
export default new Router({
routes: [
{
path: '/index',
name: 'HelloIndex',
component: HelloIndex
},
{
path: ':id/show',
name: 'HelloShow',
component: HelloShow
}
]
})
More informations about this topic can be found in vue-router docs

VueJs Material plugin not working properly

I want to use the vue-material package in my app. I've everything as the docs suggest but my components are not being rendered properly. I am using VueJs 2.x.x
Here is my main.js file:
import Vue from 'vue'
import App from './App.vue'
import state from './state.js'
import VueMaterial from 'vue-material'
import 'vue-material/dist/vue-material.css'
Vue.use(VueMaterial)
Vue.material.theme.register('default', {
primary: 'cyan',
accent: 'pink'
})
new Vue({
el: '#app-container',
components: {
App
}
})
And here is App.vue:
<template>
<div id="app">
<div>Current page: {{currentView}}</div>
<img src="./assets/logo.png">
<transition name="fade" mode="out-in">
<component #stateCPchanged="changeView" v-bind:is="currentView"> </component>
</transition>
</div>
</template>
<script>
import numberPage from './components/NumberPage.vue'
import redirectPage from './components/RedirectPage.vue'
import state from './state.js'
export default {
data () {
return {
currentView: state.currentPage
}
},
components: {
numberPage: numberPage,
redirectPage: redirectPage
},
methods: {
changeView() {
this.currentView = state.currentPage
}
}
}
</script>
<style>
...
</style>
And the page using the plugin:
<template>
<div v-md-theme="'default'"
<md-button class="md-raised">Default</md-button>
</div>
</template>
<script>
import state from '../state.js'
export default {
data(){
return{
message: "this.clientId"
}
},
methods:{
goOtp(){
},
goRedirect(){
state.currentPage = 'redirectPage'
}
}
}
</script>
<style>
....
</style>