How use vue-loader without vue-cli

Question

I am trying to put together the absolute bare minimum example of a Vue project that uses webpack to transpile .vue files.

My goal is to understand each build step in detail. Most tutorials advise to use vue-cli and use the webpack-simple config. And although that setup works, it seems overkill for my simple purpose. For now I don't want babel, linting or a live web server with hot module reloading.

A minimal example with just import Vue from 'vue' works! Webpack compiles the vue library and my own code into one bundle.

But now, I want to add vue-loader to the webpack config, so that .vue files will get transpiled. I have installed vue loader:

npm install vue-loader
npm install css-loader
npm install vue-template-compiler 

And I have added vue-loader to the webpack config:

var path = require('path')

module.exports = {
  entry: './dev/app.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
          }
        }
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  }
};

I have created hello.vue

<template>
  <p>{{greeting}} World</p>
</template>

<script>
export default {
    data:function(){
        return {
            greeting:"Hi there"
        }
    }
}
</script>

And in my app I import 'hello'

import Vue from 'vue'
import hello from "./hello.vue";

    new Vue({
      el: '#app',
      template:`<div><hello></hello></div>`,
      created: function () {   
        console.log("Hey, a vue app!")
      }
    })

The loader does not seem to pick up the .vue files, I get the error:

Module not found: Error: Can't resolve './hello.js' 

EDIT

When trying to import hello from 'hello.vue' I get the error:

Unknown custom element: <hello> - did you register the component correctly?

Am I missing a step? Am I importing the .vue component the right way? How do I use the hello.vue component from app.js?

Solution 1

First, you are not importing the file correctly. You should import it like so:

import Hello from './hello.vue'

Secondly, after you import the component you'll still need to register it somehow. Either do this globally Vue.component('hello', Hello), or on the Vue instance:

new Vue({
  el: '#app',
  template:`<div><hello></hello></div>`,
  components: { 'hello': Hello },
  created: function () {   
    console.log("Hey, a vue app!")
  }
})

---

As a side note, if you want to be able to import the file without having to specify the .vue extension, you can specify that the .vue extension should be resolved in your config file.

In that case, the resolve object in your config file should look like this:

resolve: {
  alias: {
    'vue$': 'vue/dist/vue.esm.js'
  },
  extensions: ['.js', '.vue', '.json']
}

Here's the documentation on resolve.extensions.

Solution 2

In addition to @thanksd answer:

As of vue-loader v15, a plugin is required:

// webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  module: {
    rules: [
      // ... other rules
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    // make sure to include the plugin!
    new VueLoaderPlugin()
  ]
}

https://vue-loader.vuejs.org/guide/

Comments

[Kokodoko]

Thanks a lot, I missed registering the component with Vue.component('hello', Hello), now it starts to make sense... :)