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?

Where are you actually trying to import the .vue file? And yes, please share the error you're getting. — thanksd
I have edited the question, when I try to import code from the .vue file this code is not found. — Kokodoko
Yes the insistance on using vue-cli (in their docs) is v annoying. eg I use laravel-mix for .vue compilation and a quick and easy API for webpack. — artfulrobot

thanksd thanksd · Accepted Answer · 2017-09-29T17:23:53

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.

How use vue-loader without vue-cli

4 Answers