How can I load a specific component from an HTML template in VueJS?

Question

I added VueJS to my Django project using webpack loader. Vue works, but i'm very new to it so i'm struggling to understand the structure.

I have the following template:

django_template.html: this is where i'm loading the Vue app

{% load render_bundle from webpack_loader %}

{% block content %}
    
<div id="app">
    <app></app>
</div>
                      
{% render_bundle 'chunk-vendors' %}
{% render_bundle 'chart' %}

{% endblock %}

Now there is my Vue app where i have two basic components, one is testComponent1.vue

<template><h1>This is the test component one</h1></template>

and another is testComponent2.vue:

<template><h1>This is the test component two</h1></template>

Then i have 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");

Now my question is:

How do i call only a specific component and not all of them? The code i provided will load all the components of the vue app, but since i'm using Vue with Django, on a certain HTML page i will want some component, on another page i'll need another component. Any kind of advice is appreciated!

How does Django inform your VueJS app which component to load? — Terry
– Terry, Commented Dec 23, 2020 at 21:26
Vue is not really suitable to render classic Django pages/routes. Vue is a framework to build a single page app; Django serves the entire Vue app once, then typically only exchanges pure data with the Vue app running in the browser. SEO URLs can be simulated using Vue's router package, but in general, whether a component is displayed or not is implemented using conditional rendering, where the (ever-changing) state of your app determines which components appear as part of the DOM and which ones are removed. — user5734311
– user5734311, Commented Dec 23, 2020 at 21:32
Unless you have a very good understanding of classical server-side rendering vs. SPA rendering, I suggest sticking to either Django templates or using Vue. — user5734311
– user5734311, Commented Dec 23, 2020 at 21:36
Thank you for your answer! I disagree about Vue being suitable only for SPA, i'm pretty sure they explicitly said Vue can be used for SSR apps or progressive web apps too. This is what webpack-loader was made for — JayK23
– JayK23, Commented Dec 23, 2020 at 21:38

tony19 · Accepted Answer · 2022-07-14 23:59:12Z

1

There are thousands of options you can go with. The easiest one if you want just disable them just use if/else statement:

https://v2.vuejs.org/v2/guide/conditional.html

`Vue is awesome!

Oh no 😢`

Or you can go with dynamic components:

https://v2.vuejs.org/v2/guide/components-dynamic-async.html

<component v-bind:is="currentComponent"></component>

export default {
  name: "App",
  data: () => { currentComponent: 'testComponent1' }
  components: {
    'testComponent1': testComponent1,
    'testComponent2': testComponent2,
  },
};

edited Jul 14, 2022 at 23:59

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Dec 24, 2020 at 1:53

Revolist

889 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How can I load a specific component from an HTML template in VueJS?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related