I'm trying to import an HTML file into my Vue project. I've already looked at this question and answer, but it doesn't seem to work for me, although I follow the steps it suggests. Here's what I tried:
My HTML File:
I've created a brand new Vue project using vue create vue-html. Before I could use npm run serve, I had to install Vue using the command npm i vue@3.2.26. Then I installed the html-loader using the command: npm install html-loader --save-dev. From here I've added an HTML file (NetworkDiagram.html) inside the components folder inside src. In here I've defined only the most basic HTML to see if it works: <h1>Hello world!</h1>.
My App.vue:
I've added 3 lines of code to import the NetworkDiagram component into the existing App.vue file (which works).
<template>
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
<NetworkDiagram /> // I've added this line (1/3)
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
import NetworkDiagram from './components/NetworkDiagram.html' // This line (2/3)
export default {
name: 'App',
components: {
HelloWorld,
NetworkDiagram // and this line (3/3)
}
}
</script>
<style>
#app {
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>
vue.config.js:
Finally, I've changed the vue.config.js file from:
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true
})
to:
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
chainWebpack: config => {
config.module
.rule('html')
.test('/\.html$/')
.use('html-loader')
.loader('html-loader')
}
})
Once I run npm run serve the server starts up. Without the added code in App.vue it shows the standard Vue homepage for a new project, which is as expected. However, once I add the code it gives me the following error:
ERROR in ./src/components/NetworkDiagram.html 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <h1>Hello world!</h1>
To me this seems as if I'm not using (the correct) html-loader because whatever html tag I write, it gives me the same error, or I'm setting up my vue.config.js file incorrectly. So my question is: how can I use a working html loader to import an html file into my existing Vue application, preferably inside App.vue?
Why am I trying to do this?
For anyone interested: I'm trying to create an application that can work with Cisco's Next UI toolkit to create a network diagram, however this library needs an html file to connect the code to. I've tried to add the code to a .vue file, but importing the needed js files into this file gives me tons of errors and doesn't seem to work.
