How use vue-loader without vue-cli
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
.
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/