I have the following code and i am getting the following error:
Failed to mount component: template or render function not defined.
I want to include top and bottom navigation to the app.vue
How can i achieve that?
Main.js:
new Vue({
el: '#app',
router,
template: '<App/>',
components: { 'App':App }
})
App.vue:
<template>
<div id="app">
<navigationtop></navigationtop>
<navigationbottom></navigationbottom>
<router-view/>
</div>
</template>
<script>
import navigationtop from './components/navigation/top'
import navigationbottom from './components/navigation/bottom'
export default {
name: 'app',
components: {
'navigationtop': navigationtop,
'navigationbottom': navigationbottom
}
}......
Router:
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
]
})
HelloWorld:
<template> </template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'}}}
</script>
Try to import your app like this:
import App from './foobar/App.vue'
and render it inside your Vue({}) object like:
new Vue({
el: '#app',
router,
render: h => h(App)
})
Related
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>
I'm sure i'm doing something stupid, but i just can't get this to work.
I defined routes in a separate js file, imported that into a newly created router, that i mounted in vue.
In the vue devtools i do see my named routes, but where the RouterView is in the vue devtools, the html shows
Routes.js:
import Home from '#/Views/Home.vue';
import NewProefwerk from '#/Views/NewProefwerk.vue';
const routes = [
{
path: '/',
name: 'home',
Component: Home
},
{
path: '/Nieuw',
name: 'new',
Component: NewProefwerk
}
];
export default routes;
main.js:
import VueRouter from 'vue-router';
import routes from '#/Routes'
Vue.use(VueRouter);
const router = new VueRouter({
mode: 'history',
base: '/',
routes
})
new Vue({
router,
render: h => h(App)
}).$mount('#app');
App.vue:
<template>
<div id="app">
<Navigation></Navigation>
<router-view></router-view>
</div>
</template>
<script>
import Navigation from '#/components/Navigation.vue';
export default {
name: 'app',
components: {
Navigation
}
};
</script>
Try to change Component to component.
UPDATE:
It magically starts to work later on after I clear browser cache, I do not know what happened before.
I wonder how to include router-view in a component rather than directly use it?
For Example:
main.js
import Vue from 'vue'
import router from "./router"
import App from './App.vue'
new Vue({
el: '#app',
render: h => h(App),
router
})
App.vue
<template>
<div>
<page-content></page-content>
</div>
</template>
<script>
import pageContent from "./page-content.vue";
export default {
name: 'app',
data() { return {}; },
components: {
"page-content": pageContent
}
}
</script>
page-content.vue
<template>
<div class="page-content">
<router-view>
</router-view>
</div>
</template>
<script>
export default {
}
</script>
router.js
import Vue from "vue";
import VueRouter from "vue-router";
Vue.use(VueRouter);
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
const routes = [{ path: '/', component: Foo }]
export default new VueRouter({
routes
})
The problem is I can not see foo shown up on page
I'm trying to get my head round vue-router. I'm used to instantiating Vue like this...
vm = new Vue({
el : '#vueRoot',
data : { msg : 'hello' }
...
})
Now I'm being asked to instantiate it passing the router...
vm = new Vue({
router
}).$mount('#vueRoot');
My question is where do I put my data or methods, or whatever other Vue properties I would normally use? I see that my root Vue can have markup, with router-link elements. Am I to understand that, once I use the router, everything should be in components?
You can use your default notation:
new Vue({
el: '#app',
router,
template: '<MyApp/>',
components: { MyApp }
})
But you must have a <router-view/> Element in your template.
In your Main.js
window.Vue = require('vue');
import VueRouter from 'vue-router'
import Overview from '../components/Overview.vue';
import Sale from '../components/Sale.vue';
Vue.use(VueRouter);
let routes = [
{path: '/home', component: Overview,name:'Overview'},
{path: '/sale', component: Sale, name:'Sale'},
];
const router = new VueRouter({
mode: 'history',
routes
});
const app = new Vue({
el: '#vueRoot',
router,
});
In your Root View place element
<router-view></router-view>
In your links
<router-link to="/sale" class="nav-link">
<i class="nav-icon fas fa-cart-plus "></i>
<p>
Point of Sale
</p>
</router-link>
In your Views
<template>
<v-app>
{{viewTitle}}
{{viewSubtitle}}
</v-app>
</template>
<script>
export default {
data() {
return {
viewTitle:'Home',
viewSubtitle:'description',
}
},
methods: {
YourMethod_1() {
},
YourMethod_2() {
},
}
}
</script>
This is how the latest versions of Vue.js works with router
import App from './App';
import VueRouter from 'vue-router';
import {routes} from './routes';
const router = new VueRouter({
routes,
mode: "history", // you can remove this if not required
});
new Vue({
el: '#app',
router,
render: h => h(App)
});
routes.js
export const routes = [
// your components as objects
]
App.vue
<template>
<div>
<router-view/>
</div>
</template>
<script>
export default {
name: "App"
}
</script>
Ok so I started a basic VueJS with the VueCli.
This is my setup:
App.vue
<template>
<div id="app">
<router-link to="/home"><span>Home</span></router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'app'
}
</script>
Home.vue
<template>
<h1>{{ msg }}</h1>
</template>
<script>
export default {
name: 'home',
data () {
return {
msg: 'HomeView'
}
}
}
</script>
index.js from the router:
import Vue from 'vue'
import Router from 'vue-router'
import Home from '#/components/pages/Home'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/home',
name: 'Home',
component: Home
}
]
})
main.js:
import Vue from 'vue'
import App from './App'
import NavigationBar from './components/NavigationBar'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
template: '<App/>',
components: {App}
})
new Vue({
el: '#navigation-bar',
template: '<NavigationBar/>',
components: {NavigationBar}
})
This works perfectly fine. The routerlink works and display the Home.vue.
However I created a NavigationBar Component:
NavigationBar.vue
<template>
<div><span>Test</span>
<router-link to="/home"><span>Home</span></router-link></div>
</template>
<script>
export default {
name: 'navigationBar',
data () {
return {
}
}
}
</script>
When I now delete the router-link in the App.vue and add the navigation-bar ID I cant see the router-link. But the NavigationBar gets loaded, because I see the Test Span:
App.vue
<template>
<div id="app">
<div id="navigation-bar"></div>
<router-view></router-view>
</div>
</template>
Why doesnt it work? The router-link is just inside a template and I get no error message.