why is html content not shown when running?

I don’t think you should edit directly to index.html as Vue is Single Page Application (SPA) framework. Instead, you should use Vue Component for each page.

This video might help you to figure out how to use Vue and Vue Router properly: https://youtu.be/nnVVOe7qdeQ

Edit:

For sake of clarity, Let me build simplified diagram of Vue project for you.

Simplified Vue Project Diagram

First of all, make sure you create the project via vue cli. It guides you to build your new vue project better.

Let’s say we have 3 pages:

  • Home
  • About
  • Another

Each page has its own CSS, HTML (we call it template), and JavaScript in one file, the .vue file. To connect them, we need a first entrance, main.js. Inside of it, we can configure the router.

Inside main.js

import Vue from "vue";
import VueRouter from "vue-router";
import App from "./App.vue";
import HomePage from "./HomePage.vue";
import AboutPage from "./AboutPage.vue";
import AnotherPage from "./AnotherPage.vue";

// This is your router configuration
Vue.use(VueRouter);
const router = new VueRouter({
  [
    { path: "/",        component: HomePage },
    { path: "/about",   component: AboutPage },
    { path: "/another", component: AnotherPage },
  ],
  mode: "history",
});

// Initialize Vue App
new Vue({
  router,
  render: h => h(App),
}).$mount("#app");

Then, we need to create App.vue and put <router-view /> inside of it.

Inside App.vue source file

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
export default {
  // Keep this empty. Except if you
  // need to add sidebar or any else.
}
</script>

Now you’re ready to create those three pages

Every pages looks like this:

<style scoped>
  // Your CSS here
</style>

<template>
  <div>
    <!-- Your HTML here -->
  </div>
</template>

<script>
  export default {
    data() {
      return {
        // Your reactive data here
      }
    },
    mounted() {
      // Your script here
    },
    methods: {
      // Your functions here
    },
  }
</script>

That’s all I can explain, hope it helps. If I missed something, please don’t hesitate to tell me. Thank you!

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top