# vue-to-dm

> Transform Vue SFC to PwC's Digital Maker compatible format

Latest version **0.1.2** (published 2022-05-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-to-dm
pnpm add vue-to-dm
yarn add vue-to-dm
bun add vue-to-dm
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.2 |
| Published | 2022-05-29 |
| First published | 2022-05-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 7 |
| Unpacked size | 21.9 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Yang Shen |
| Maintainers | ironblood |
| Keywords | Vue SFC, Digital Maker, PwC |

## Links

- npm: https://www.npmjs.com/package/vue-to-dm
- Repository: https://github.com/IronBlood/vue-to-dm
- Homepage: https://github.com/IronBlood/vue-to-dm#readme
- Issues: https://github.com/IronBlood/vue-to-dm/issues
- Funding: https://www.patreon.com/IronBlood
- npm.io page: https://npm.io/package/vue-to-dm

## Dependencies (7)

- [chalk](https://npm.io/package/chalk.md) ^4.1.2
- [prettier](https://npm.io/package/prettier.md) 2.6.2
- [@babel/core](https://npm.io/package/@babel/core.md) ^7.17.10
- [app-root-path](https://npm.io/package/app-root-path.md) ^3.0.0
- [posthtml-parser](https://npm.io/package/posthtml-parser.md) ^0.11.0
- [posthtml-render](https://npm.io/package/posthtml-render.md) ^3.0.0
- [vue-template-compiler](https://npm.io/package/vue-template-compiler.md) ^2.6.14

## Recent versions

- 0.1.2 (latest) — 2022-05-29
- 0.1.1 — 2022-05-29

## README

# Vue to DM

![Vue to DM CI](https://github.com/IronBlood/vue-to-dm/workflows/vue-to-dm%20ci/badge.svg?branch=main) [![Coverage Status](https://coveralls.io/repos/github/IronBlood/vue-to-dm/badge.svg?branch=main)](https://coveralls.io/github/IronBlood/vue-to-dm?branch=main)

This utility helps to transform Vue SFC files to PwC Digital Maker compatible SFC format:

* Removing all `import`s from `<script />` blocks.
* Removing `components` property from exported default objects.
* Renaming names of components based on their filenames in `underlined_lowercased_style`. Usages in templates will also be transformed automatically. These names will be used as registered components in Digital Maker.
* Combining all `style` blocks into a single `app.css` file.

**DISCLAMER**

* This utility is *NOT* a compiler or bundler. Please use [Vue CLI](https://cli.vuejs.org/), [Vite](https://vitejs.dev/) or any other tools to build your project first to make sure everything works. Then use `vue-to-dm` to transform Vue SFC files.
* Currently DM uses Vue 2.x, and `vue-to-dm` doesn't transform any API level source code.
* `vue-to-dm` only supports JavaScript as `<script />` blocks and CSS as `<style />` blocks, [TypeScript](https://www.typescriptlang.org/), [SCSS](https://sass-lang.com/) are not supported yet.
* External libraries, scripts, stylesheets are not bundled.
* JavaScript is a flexible language, the sample code below might work with vue compiler, but `vue-to-dm` is a limited utility, please avoid such usage.

```javascript
import components from "@/components.js";

export default {
  components: {
    ...components,
  }
};
```

## Usage

Install:

```bash
npm i vue-to-dm -D
```

Create your build script:

```javascript
const { build } = require("./dist/index.js");

build([`/path/to/folders/of/src`], {
	dist_dir: `/path/to/dist/dir`,
});
```

API:

```typescript
export const build = (dirs: string[], options: BuildOptions = {}): void;
```

* `dirs`: an array of folders containing SFC files to be transformed.
* `options`:
	* `dist_dir`: target directory which will contain `app.css` and `components` directory after `build()`.
	* `prettier`: [options](https://prettier.io/docs/en/options.html) to format output files with Prettier.

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