Why is this Vue template rendering? h(App2), but App2 does not exists? What is wrong? Thanks a lot for your help.
index.html
<body>
<div id="app"></div>
</body>
App0.vue
<template>
<div>
Hi there!
</div>
</template>
<script>
export default {
name: "App1"
}
</script>
main.js
import Vue from 'vue';
import App2 from './App0';
new Vue({
el: '#app',
render: h => h(App2)
});
Just add components option:
new Vue({
el: '#app',
components: { App2 },
render: h => h(App2)
});
Related
I'm building a component library based on Vuetify.
Vuetify installation tells people to add this line
new Vue({
vuetify,
render: h => h(App)
}).$mount('#app')
However, I want people to be able to just import my component.
It looks like this
<template>
<HelloWorld />
</template>
<script>
import { HelloWorld } from "MyComponentLibrary";
export default {
components: {
HelloWorld,
},
};
</script>
Now, if this line of Vuetify is necessary...
new Vue({
vuetify,
});
I will have to make my component library API looks like this
import { reExportedVuetify } from "MyComponentLibrary";
new Vue({
vuetify: reExportedVuetify,
});
So, what does new Vue({ vuetify }) do?
This is the component I want to use [https://krystalcampioni.github.io/vue-hotel-datepicker/] [https://github.com/krystalcampioni/vue-hotel-datepicker#i18n] for date picker on my index.html but it is me giving an error Failed to mount component: template or render function not defined. Below is the code I have written on my index.html`
//index.html
<html>
<script src="path/to/vue.js"></script>
<script src="vue-hotel-datepicker/dist/vue-hotel-datepicker.min.js"></script>
<body>
<div id="app">
<HotelDatePicker/></<HotelDatePicker>
</div>
<script>
new Vue({
el: '#app',
components: { HotelDatePicker }
})
</script>
</body>
</html>
`
If youre using a build tool, You must import the component before registering it with the vue instance
import HotelDatePicker from 'vue-hotel-datepicker'
new Vue({
el: '#app',
components: { HotelDatePicker }
})
Otherwise use require
new Vue({
el: '#app',
components: {
'vue-hotel-datepicker': require('vue-hotel-datepicker')
}
})
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>
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)
})
Full code: https://github.com/kenpeter/test_vue_template
git clone https://github.com/kenpeter/test_vue_template
install: yarn install
run: yarn dev
visit localhost:8080 and see nothing
Because you didn't render anything in your root component.
In your index.html, render the app component:
<div id="app">
<app></app>
</div>
There are several ways to do this. If you don't want to touch your index.html, you can also modify the main.js. All of the code below should work:
new Vue({
el: '#app',
render: h => h(App),
components: {
App
}
})
or
new Vue({
el: '#app',
template: '<App/>',
components: {
App
}
})