CODEWITHSUNDEEP
javascriptdjangovue.jswebpack
JayK23
JayK23

Reputation: 253

How can i load a VueJS app from a template using webpack?

I'm just getting started to VueJS and i'm currently trying to add it to my Django project using Webpack-Loader.

I have the following two files:

App.vue

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your first Vue.js App"/>
  </div>
</template>

<script>

    import HelloWorld from './components/HelloWorld.vue'
    
    export default {
      name: 'app',
      components: {
        HelloWorld
      }
    }
    
    
    </script>

App02.vue

<template>
  <div id="app02">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your second Vue.js App0"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'app02',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app02 {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Here is my main.js:

import Vue from "vue/dist/vue.js";
import Vuex from "vuex";
import storePlugin from "./vuex/vuex_store_as_plugin";
import App from './App.vue'

Vue.use(Vuex);
Vue.use(storePlugin);
Vue.config.productionTip = false;

/* NOTE: unlike index.js, we are not passing props from our template, so the following render/mount 
  syntax is ok */

new Vue({
    render: h => h(App),
}).$mount('#app');

And finally, here is my Django html template:

{% load render_bundle from webpack_loader %}


{% block content %}

    <h3>My second Vue app goes here</h3>

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

{% endblock %}

The problem with my code is that it doesn't seem to load App02, because when i load the html i will see Welcome to your first Vue app and not Welcome to your second app, even though, from my template, i'm loading vue_app_02.

I know this question is very basic, but i'm very new to this and everything is very confusing, i don't understand what do i need main.js and other files like index.js, index.html. Any kind of advice is appreciated

Upvotes: 0

Views: 187

Answers (1)

hassan zarghami
hassan zarghami

Reputation: 179

You must add app02.vue into vue router

This site can help you to create vue router

https://saidhayani.medium.com/understand-routing-in-vue-js-with-examples-6da96979c8e3

Upvotes: 1

Related Questions