Tutorials / Vue /

Use HTML Files as Vue Templates with Webpack

Aug 31, 2022

By combining Vue and Webpack, you can use HTML files for your Vue templates. In the modules.rules[] property, you must insert the following object into the array:

modules: {
  rules: [
    {
      test: /\.html$/i,
      type: 'asset/source'
    }
  ]
}

For example, below is a Webpack config we use for one of our projects.

'use strict';

const webpack = require('webpack');

module.exports = {
  mode: 'development',
  entry: {
    app: `${__dirname}/src/index.js`
  },
  target: 'web',
  optimization: {
    minimize: false
  },
  output: {
    path: `${__dirname}/dist`,
    filename: '[name].js'
  },
  plugins: [
    // ...
  ],
  module: {
    rules: [
      {
        test: /\.html$/i,
        type: 'asset/source'
      },
      {
        test: /\.css$/i,
        type: 'asset/source'
      }
    ]
  }
};

On Webpack 5, setting the type to asset/source means that, if you import or require() a .html file, you get back the contents of the file as a string. This works great for Vue's template property. On older versions of Webpack, you would use raw-loader instead.

const template = require('./template.html');

const app = Vue.createApp();

app.component('my-component', {
  template: template
});

Node

You can also import HTML files as strings in Node.js for server side rendering. Here's how you can make Node's require() function return HTML files as strings.

const fs = require('fs');

require.extensions['.html'] = function(module, filename) {
  module.exports = fs.readFileSync(require.resolve(filename), 'utf8');
};

const template = require('./template.html');
typeof template; // 'string'

Vue School has some of our favorite Vue video courses. Their Vue.js Master Class walks you through building a real world application, and does a great job of teaching you how to integrate Vue with Firebase. Check it out!

Did you find this tutorial useful? Say thanks by starring our repo on GitHub!

Use HTML Files as Vue Templates with Webpack

Node

More Vue Tutorials