Vue to DM

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

• Removing all imports 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, Vite 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, SCSS 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.

import components from "@/components.js";

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

Usage

Install:

npm i vue-to-dm -D

Create your build script:

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

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

API:

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 to format output files with Prettier.