Render html files through Vue Router

Question

I am attempting to use Vue router to render HTML partials files. I can render the vue instance just fine, but when I attempt to switch to my first HTML file I get the error.

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

I have seen this before when trying to initialize the Vue instance at first, but this is when I trying to bring up a route. Thanks for any help you can provide.

import Vue from 'vue'
import router from '@/components/elements/router'
import Elements from '@/components/elements/elements'

// eslint-disable-next-line no-new

new Vue({
  router,
  el: '#elements',
  render: h => h(Elements)
})

routes/index.js:

import Vue from 'vue'
import VueRouter from 'vue-router'
import Routes from './routes'

// Initialize Vue Router
Vue.use(VueRouter)

export default new VueRouter({
  mode: 'history',
  routes: Routes
})

routes/routes.js:

import Typography from '@/html/global/partials/typography.html'

const Routes = [
  {
    path: '/',
    redirect: '/home'
  },
  {
    path: '/typography',
    name: 'Typography',
    mode: history,
    component: { template: Typography }
  }
]

export default Routes

elements.vue:

<template>
  <div id="elements-library">
    <Nav />
    <router-view />
  </div>
</template>

<script>
import Nav from '@/components/elements/partials/nav'
export default {
  name: 'elements',
  components: {
    Nav
  },
}
</script>

nav.vue:

<template>
  <nav id="elements-nav">
    <router-link to="/typography">Typography</router-link>
  </nav>
</template>

<script>
export default {
  name: 'elements',
}
</script>

Webpack.config

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

let __root = path.join(__dirname, '../')
let __src = path.join(__dirname, '../src')
let __dist = path.join(__dirname, '../dist')

module.exports = {
  context: __src,
  devtool: 'source-map',
  entry: {
    elements: './js/elements/elements.js'
  },
  output: {
    path: path.resolve(__dist),
    filename: 'js/[name].js',
    chunkFilename: 'js/[name].chunk.js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            scss: ['vue-style-loader', 'css-loader', 'sass-loader']
          }
        }
      },
      {
        test: /\.html$/,
        use: [{
          loader: 'html-loader',
          options: {
            minimize: true,
            removeComments: false,
            collapseWhitespace: false,
            removeAttributeQuotes: false
          }
        }]
      },
      {
        test: /\.(gif|png|jp(e*)g)$/,
        use: [{
          loader: 'file-loader',
          options: {
            name: '[path][name].[ext]',
            publicPath: '../'
          }
        }]
      },
      {
        test: /.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
        use: [{
          loader: 'file-loader',
          options: {
            name: 'fonts/[name].[ext]',
            publicPath: '../' // override the default path
          }
        }]
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin(),
    new MiniCssExtractPlugin({
      filename: 'css/[name].css',
      chunkFilename: 'css/[name].css'
    }),
    new HtmlWebpackPlugin({
      template: 'html/elements.html',
      filename: 'index.html',
      inject: false
    }),
  ],
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      '@': path.resolve(__src),
      Vue: 'vue/dist/vue.esm.js'
    }
  }
}

Andrew Vasilchuk Andrew Vasilchuk · Accepted Answer · 2019-08-14T17:04:37

Try to add this line to your webpack.config.js.

resolve: { alias: { vue: 'vue/dist/vue.esm.js' } }

References: GitHub issue, GitHub issue.

Render html files through Vue Router

2 Answers