How to include external Vue template into an HTML file

Question

I'm trying to build a practice website on a local web server with an address of http://localhost:3000/.

It properly displays the page when just HTML and JavaScript are involved, but when I try to include Vue as well, it doesn't work.

As it works fine when I'm not including Vue, I suspect that the reason why it's behaving funny is that the Vue file that I prepared is not properly connected to the other files and the HTML file doesn't recognize it.

But what could be the fix for this?

I'll show some more background info below.

[Directories & Files]

Currently, all the necessary files are stored in a directory called slutuppgift, and this folder contains the following sub-directories and files.

slutuppgift/
|-- public/                 Static files
|-- |-- index.html          HTML-code 
|-- |-- feed.json           the API's JSON-data
|-- src/                
|-- |-- main.js             JavaScript-code to initialize Vue & app.vue
|-- |-- app.vue             Vue-code for the application
|-- |-- components/         Vue-code for components
|-- |-- views/              Vue-code for pages/templates (Vue-router).
|-- |-- router.js           JavaScript-code for Vue-router (URL-structure)
|-- |-- api.js              JavaScript-kod for Express.js (the API)

My HTML code (index.html)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>Titel</title>
    <link rel="stylesheet" type="text/css" href="SeparateCSS.css">
  </head>
  <body>
    <div id="app"></div>

    <script src="../src/main.js"></script>   
  </body>
</html>

My JavaScript code (main.js)

import Vue from 'vue';
import VueRouter from './router';
import App from './app.vue';

Vue.config.productionTip = false

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

My Vue code (app.vue)

<template>
  <div >  
    <h1>Experimenting to see if the h1 is displayed</h1>
  </div>
</template>

<script>
export default {
  data(){
    return {

    };
  }
}
</script>

Why is the h1 "Experimenting to see if the h1 is displayed" not displayed? Is it not enough to include a JavaScript file with the statement <script src="../src/main.js"></script> since the app.vue file is already connected to the main.js file?

[UPDATED]

Here is my router.js code.

import Vue from 'vue';
import VueRouter from 'vue-router';
import About from './views/about.vue';

// View component import
import AppHome from './views/home.vue';

Vue.use(VueRouter);

export default new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      // URL when view component are displayed
      path: '/',
      name: 'home',
      // View component registration
      component: AppHome
    },
    {
      // URL when view component are displayed
      path: '/about',
      name: 'about',
      // Lazy-loaded view component
      component: About      
    }
  ]
})

Did you try to put your index.html file outside public folder? I beleive the Vue pattern is to look for this file at project root. I tryed at my project, and that really affects. Give it a shot ;) — Julliano Osorio
– Julliano Osorio, Commented Aug 1, 2019 at 12:48
Yes, I'm using vue-cli and already tried putting the index.html file outside the public folder, but it's not working. — Sean2014
– Sean2014, Commented Aug 1, 2019 at 13:14

tony19 · Accepted Answer · 2022-07-15 04:55:18Z

3

Before you can deploy your Vue app to a static web server you need to "build" it. Files like .vue files are effectively source code, the browser doesn't know what to do with them.

To generate the artifacts you require to deploy run:

vue-cli-service build

This will generate the deployable artifacts into the dist folder. Copy those up to your web server and you will be able to load it.

More detail is here:

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

edited Jul 15, 2022 at 4:55

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Aug 1, 2019 at 11:33

Kong

9,72417 gold badges77 silver badges114 bronze badges

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

2 Comments

Sean2014 Over a year ago

Where is that dist folder expected to show up? I ran the code you suggested, but didn't find it anywhere. I looked for it in the node_modules file as well.

Kong Over a year ago

The dist folder will be generated at your project root - next to your package.json

tony19 · Accepted Answer · 2022-07-16 01:38:23Z

1

Is slutuppgift folder directly on local web server? With structure like that you need to compile the Vue application first.

If you don't want to compile your application, you can make plain html file with Vue instance in it. In that case you link VueJS in html file with <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>.

You can check the Vue instance example in the official documentation here.

edited Jul 16, 2022 at 1:38

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Aug 1, 2019 at 12:10

DrofX

733 bronze badges

6 Comments

Sean2014 Over a year ago

I created a project by npm install -g vue-cli. It compiles and works when I tested a simple statement, but when I tried to do that by Vue template nothing was displayed. Does this problem have anything to do with the setting of the vue router? This program involves a vue-router part, and I've successfully displayed vue template several time before. I've already checked the documentation, and it only covers very simple stuff in a general form, so I don't think it will help in this specific case. (I simplified the code in my question, but the actually code is more complex)

DrofX Over a year ago

Yes, vue-router can be a problem if you are hosting compiled webpage on custom web server. You can read some vue-router configurations for popular servers here at the official documentation.

Sean2014 Over a year ago

I updated my original question, and now it also shows the router.js file's content. It's still not working. Do you find anything wrong with the configuration written in the router.js file?

DrofX Over a year ago

For start you can try with mode: 'hash'. If this solves the problem than it is problem in server configuration. Also check what is value of process.env.BASE_URL. Have you checked the browser console for any errors when you open webpage?

Sean2014 Over a year ago

The result was the same when I tried mode: 'hash' as well. When I checked the browser console just a moment ago, there were a few errors. One of them was Uncaught DOMException: Failed to execute 'setAttribute' on 'Element': ',' is not a valid attribute name., and the other one was Failed to load resource: the server responded with a status of 404 (Not Found), though I think I saw something different when I tried to run the program yesterday.

|

Sean2014 · Accepted Answer · 2019-08-02 07:36:37Z

The original problematic code was the following.

<template>
  <div >  <!-- class="app" -->
    <!-- VueRouter-component som renderas till <a href="..."> -->
    <router-link to="/">Home</router-link> &nbsp;
    <router-link to="/about">About</router-link>

    <h1>Experimenting to see if the h1 is displayed</h1>

    <main role = "main">
          <div class = "flex-topbar">
            <div><h2> Kwitter </h2></div>

            <div>
              <ul class="menu" ontouchstart="">
                <li class="category" >MENY</li>
                <li class="category1">HEM</li>
                <a href = "https://dotinstall.com" target = "_blank">
                  <li class="category2">Lär mer</li>
                </a>
              </ul>
            </div>
          </div>

      <br>
            <p>Vad händer?</p>
      <article>
            <form class = "userContainer">
              <div class = "div1">
                <img src="avatar/avatar-loggedin.jpg">
              </div>
                  <textarea rows = "5" cols = "50" name = "kweet_content">  </textarea>
              <p><button class = "kwitterBtn", type = "submit">Kwitter</button></p>
            </form>
    </article>
        <br>
    </main>
    <section>

    </section>
    <br>
    <p><button class = "JsonEx">Show previous kweets</button></p>

    <p id="showHistory"></p>

    <!-- VueRouter-component som visar den component som definerats för en url i router.js -->
    <router-view></router-view>   

  </div>
</template>

<script>
// Component import
import ExampleComponent from './components/example-component.vue';

export default {
  // Component namn
 // name: 'app',
  components: {
    // Component registrering
    ExampleComponent
  },
  data(){
    return {
      // Component variabler
    };
  }
}
</script>

Notice that there is a comma between "kwitterBtn" and type in the part

<br>
            <p>Vad händer?</p>
      <article>
            <form class = "userContainer">
              <div class = "div1">
                <img src="avatar/avatar-loggedin.jpg">
              </div>
                  <textarea rows = "5" cols = "50" name = "kweet_content">  </textarea>
              <p><button class = "kwitterBtn", type = "submit">Kwitter</button></p>
            </form>
    </article>
        <br>

, and this was the culprit of the whole mess. After removing the comma everything was good.

Your linter should have picked that up - these sought of "typos" are inevitable, but the linter will help you find them

Collectives™ on Stack Overflow

How to include external Vue template into an HTML file

3 Answers 3

2 Comments

6 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related