Elevista / vuejs-loader

A loader for webpack that merge separate js,css,html files to single vue component file

Vue.js Loader

A wrapper loader of vue-loader for .js file

Install

requires vue-loader installed

npm i vuejs-loader

When do I need it?

If you want to use vue-loader but do not want to make .vue file and want to separate html,css,js files.

Usage

Use the loader either via your webpack config or inline.

Via webpack config

webpack.config.js

const path = require('path')
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        include: path.resolve(__dirname, 'YOUR APP PATH'),
        loader: 'vuejs-loader'
      },
    ],
  }
}

In your application

import component from './app.js'

Inline

In your application

import component from 'vuejs-loader!./app.js'

How it works

DIR

app/
 - app.js
 - app.html
 - app.css
assets/
 - ...

app.js

export default {
  name: 'app',
  templateSrc: './app.html',
  styleSrc: './app.css',
}

import component from 'vuejs-loader!./app.js'

imported component object equals below

app.vue

<script>
export default {
  name: 'app',
  templateSrc: './app.html',
  styleSrc: './app.css',
}
</script>
<template src="./app.html"></template>
<style scoped src="./app.css"></template>

import component from 'vue-loader!./app.vue'

License

The MIT License (MIT)

Copyright (c) 2017 Elevista