0

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

1 Answer 1

1

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

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.