# vue-composite-loader

> Webpack loader for creating vue-composite components from your .vue files.

Latest version **1.0.3** (published 2017-04-17) · ISC license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install vue-composite-loader
pnpm add vue-composite-loader
yarn add vue-composite-loader
bun add vue-composite-loader
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.0.3 |
| Published | 2017-04-17 |
| First published | 2017-04-17 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Austin Martin |
| Maintainers | auzmartist |
| Keywords | vue-composite, loader, webpack |

## Links

- npm: https://www.npmjs.com/package/vue-composite-loader
- Repository: https://github.com/auzmartist/vue-composite-loader
- Homepage: https://github.com/auzmartist/vue-composite-loader#readme
- Issues: https://github.com/auzmartist/vue-composite-loader/issues
- npm.io page: https://npm.io/package/vue-composite-loader

## Dependencies (5)

- [hash-sum](https://npm.io/package/hash-sum.md) ^1.0.2
- [loader-utils](https://npm.io/package/loader-utils.md) ^1.1.0
- [vue-style-loader](https://npm.io/package/vue-style-loader.md) ^3.0.0
- [vue-hot-reload-api](https://npm.io/package/vue-hot-reload-api.md) ^2.0.11
- [vue-template-es2015-compiler](https://npm.io/package/vue-template-es2015-compiler.md) ^1.5.2

## Alternatives

- [raw-loader](https://npm.io/package/raw-loader.md) — 4.3M weekly downloads
- [plop](https://npm.io/package/plop.md) — 1.4M weekly downloads
- [webpack-deadcode-plugin](https://npm.io/package/webpack-deadcode-plugin.md) — 80.3K weekly downloads
- [@storybook/preact-vite](https://npm.io/package/@storybook/preact-vite.md) — 54.2K weekly downloads
- [vite-plugin-transform](https://npm.io/package/vite-plugin-transform.md) — 2.4K weekly downloads

## Recent versions

- 1.0.3 (latest) — 2017-04-17
- 1.0.2 — 2017-04-17
- 1.0.1 — 2017-04-17
- 1.0.0 — 2017-04-17

## README

# vue-composite-loader [![Build Status](https://travis-ci.org/auzmartist/vue-composite-loader.svg?branch=master)](https://travis-ci.org/auzmartist/vue-composite-loader)
> A webpack loader for transforming .vue files into .js Vue composable components. Vue-composite-loader works in tandem
with vue-loader to allow you to easily share your Vue components across services with the vue-composite plugin.

## Installation
```bash
npm i --save-dev vue-composite-loader
```

## Getting Started
Vue-composite-loader is intended to be used in tandem with vue-loader, generating self-executing JS modules from .vue files. The JS modules can be requested by other Vue applications using the **vue-composite** plugin. 

1. Once installed, add vue-composite-loader to your webpack.config.js file:
```javscript
// Webpack > 2.0.x
module.exports = {
  module: {
    rules: [
      // ...
      {
        test: /\.vue$/,
        use: [
          {
            loader: 'vue-loader',
          },
          {
            loader: 'vue-composite-loader',
            options: {
              path: path.resolve(__dirname, 'path/to/output/'),
            },
          },
        ],
      }
    ]
  }
},
```
2. Run webpack.
3. Compose your Vue applications by sharing links to the js modules with **vue-composite**.

## Example
#### Input
```html
<template>
  <div class="app">{{msg}}</div>
</template>

<script>
  export default {
    name: 'app',
    data() {
      return {
        msg: 'Hello Vue!',
      };
    },
  };
</script>

<style>
.app {
  background-color: #eee;
}
</style>
```
#### Output
```javascript
(function() {
	return{
    name: 'app',
    data() {
      return {
        msg: 'Hello Vue!',
      };
    },
    template: `<div class="app">{{msg}}</div>`,
    _injectCss: `.app {
      background-color: #eee;
    }`,
};
})();
```

## Limitations
Currently, vue-composite-loader does not support any template or style pre-processors such as Jade or Sass.
These are planned enhancements.

## Development Setup

``` bash
npm install
npm lint
npm run test
```

---
_Source: https://npm.io/package/vue-composite-loader · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._