Vue import HTML from local file

Question

I am looking for a way to import HTML content from a file which is in

/src/activities/0/2/content.html

The two numbers are variables.

I need to do something like

mounted(){
   this.foo = require('/src/activities/0/2/content.html')
}

<div>
{{ foo }}
</div>

But I do not find a way to do this. If someone knows a solution, it will be very helpful.

Thank you

Roel · Accepted Answer · 2022-04-08 06:58:31Z

4

First Vue's webpack needs to understand how to load .html files. You can use html-loader. Install it first:

npm install html-loader --save-dev

Then edit (or create) vue.config.js in the project root (not src). From the docs:

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('html')
      .test(/\.html$/)
      .use('html-loader')
      .loader('html-loader')
  }
};

Now you can import HTML files like:

import html from '@/activities/0/2/content.html'

export default {
  data() {
    return {
      html,   // es6 property shorthand syntax
      foo: null
    }
  }
}

and use html like any other data variable. Or you can do it the way you asked with require:

mounted(){
   this.foo = require('@/activities/0/2/content.html')
}

@ is an alias for src

edited Apr 8, 2022 at 6:58

Roel

3,1042 gold badges32 silver badges36 bronze badges

answered Apr 12, 2020 at 10:02

Dan

63.5k18 gold badges113 silver badges122 bronze badges

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

Collectives™ on Stack Overflow

Vue import HTML from local file

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related