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
}
})
Related
I am starting to learn Vue.js by creating a simple project - I am creating this simple app where I want to list many todo list items.
My html structure would be something like this:
<div id="todo-list-1" class="todo-list"></div>
<div id="todo-list-2" class="todo-list"></div>
<div id="todo-list-3" class="todo-list"></div>
and my main.js
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
el: '#todo-list-1',
render: h => h(App)
})
App.vue
<template>
<div>
<h2>Vue Test</h2>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
how can I iterate through my elements dynamically so I dont have to create them manually?
new Vue({
el: '#todo-list-1',
render: h => h(App)
})
new Vue({
el: '#todo-list-2',
render: h => h(App)
})
new Vue({
el: '#todo-list-3',
render: h => h(App)
})
I want to create one template but render different lists for my todo list. I cant have one id class "app", I want to have multiple instance of these so I can use them in different places with different data.
You can use querySelectorAll to loop over you lists and define new Vue instance
document.querySelectorAll('.todo-list').forEach(list => {
new Vue({
el: `#${list.id}`,
render: h => h(App)
})
})
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?
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)
});
I have this code in app.js:
require('./bootstrap');
window.Vue = require('vue');
import Buefy from 'buefy';
Vue.use(Buefy);
var app = new Vue({
el: '#app',
data: {}
});
in master page I used Yield before closing body tag:
#yield('scripts')
and in a view page I tried to use Vue like this:
#section('scripts')
<script>
var app = new Vue({
el: '#app',
data: {
permission: true
}
});
</script>
#endsection
But it gives this error:
ReferenceError: Vue is not defined
I can't figure out what's the problem.
Include the following before your script -
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
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')
}
})