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!

Use HTML Files as Vue Templates with Webpack

Node

More Vue Tutorials