CODEWITHSUNDEEP
vue.jswebpackvue-cli
Kokodoko
Kokodoko

Reputation: 28158

How use vue-loader without vue-cli

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?

Upvotes: 22

Views: 10492

Answers (4)

Rijosh
Rijosh

Reputation: 1554

You may need to register the component to use inside another Vue component. In your example it will be like

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

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

Upvotes: 0

ContextCue
ContextCue

Reputation: 323

Tagging on some more info here along with @lukebearden and @thanksd. Set up a Vue app from the ground up, it's basic and I tore out some of the styling along the way cause I didn't want to deal with it: but it compiles that JS:

https://github.com/ed42311/gu-vue-app

Can confirm about the plugin, and I haven't added the resolve, but now I will :)

Let me know if you have any thoughts.

Upvotes: 0

lukebearden
lukebearden

Reputation: 53

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/

Upvotes: 2

thanksd
thanksd

Reputation: 55674

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.

Upvotes: 17

Related Questions