After successfully integrating VueJS into my Django project using webpack loader, I have encountered some difficulties due to being new to Vue and struggling with understanding its structure.
Here is the current template:
django_template.html: where the Vue app is loaded
{% load render_bundle from webpack_loader %}
{% block content %}
<div id="app">
<app></app>
</div>
{% render_bundle 'chunk-vendors' %}
{% render_bundle 'chart' %}
{% endblock %}
The Vue app consists of two basic components, testComponent1.vue:
<template><h1>This is the test component one</h1></template>
and testComponent2.vue:
<template><h1>This is the test component two</h1></template>
Followed by App.vue
<template>
<div>
<testComponent1></testComponent1>
<testComponent2></testComponent2>
</div>
</template>
<script>
import testComponent1 from "./components/testComponent1";
import testComponent2 from "./components/testComponent2";
export default {
name: "App",
components: {
'testComponent1': testComponent1,
'testComponent2': testComponent2,
},
};
</script>
And finally, main.js
import Vue from "vue";
import App from "./App.vue";
import axios from 'axios'
import Vuetify from "vuetify";
import "vuetify/dist/vuetify.min.css";
Vue.use(Vuetify);
Vue.config.productionTip = false;
new Vue({
render: h => h(App),
vuetify: new Vuetify()
}).$mount("#app");
My query now is:
How can I call a specific component without loading all of them? As I am using Vue with Django, I may need different components on different HTML pages. Any advice on this matter would be highly appreciated!