README
@view-launcher/rollup-plugin-vue
Rollup/Vite plugin ViewLauncher for Vue.js SFC.
Must be used along with rollup-plugin-vue for Rollup, or @vitejs/plugin-vue for Vite.
Usage
Installation
npm i @view-launcher/rollup-plugin-vue -D
Example for Rollup
rollup.config.js
import path from 'path'
import VuePlugin from 'rollup-plugin-vue'
import ViewLauncherVuePlugin from '@view-launcher/rollup-plugin-vue'
const entryFile = path.resolve(__dirname, 'src/main.js')
const viewLauncherOptions = {
entry: entryFile,
theme: 'light'
}
export default {
input: entryFile,
output: {
file: `./dist/main.js`,
format: 'esm',
},
plugins: [
ViewLauncherVuePlugin(viewLauncherOptions),
VuePlugin()
],
external: ['vue'],
}
Be sure that place this plugin after rollup-plugin-vue
.
Example for Vite
This plugin is compatible with Vite, just importing the same package is totally fine.
vite.config.js
import path from 'path'
import vue from '@vitejs/plugin-vue'
import { defineConfig, loadEnv } from 'vite'
import ViewLauncherVuePlugin from '@view-launcher/rollup-plugin-vue'
export default defineConfig(({ mode }) => {
// load the .env file
// you may want to create one like `.env.development.local`
const env = loadEnv(mode, __dirname)
return {
plugins: [
ViewLauncherVuePlugin({
entry: path.resolve(__dirname, 'src/main.js'),
theme: 'light',
editor: env.VITE_EDITOR || 'vscode',
}),
vue(),
],
}
})
You may have noticed that in this example, the value of editor
option was determined by the .env file, if it couldn't find any, fallback to vscode
.
Prevent hard-coding the editor
value is a best practice when you're working with multiple team members.
Be sure that place this plugin after @vitejs/plugin-vue
.
Options
export type Options = {
/**
* The Vue-SFC files that should be transformed.
* Default value: `/\.vue$/`
*/
include: string | RegExp | (string | RegExp)[]
/**
* The Vue-SFC files that should not be transformed.
* Default value: `/\.vue$/`
*/
exclude: string | RegExp | (string | RegExp)[]
/**
* This option should be used if your are bundling modules inside a virtual-machine(Docker for example),
* otherwise you can ignore this option.
*
* To open the view file in your editor, the path of the view file should be your host machine's one.
* If you are bundling inside a virtual-machine, the file path will be the virtual-machine's one by default,
* which is not correct. To fix it, you should specify a VM-to-Host path map.
*
* For example:
* VM path: `/var/www/project/src/components/Home.vue`
* Host path: `/Users/xx/project/src/components/Home.vue`
*
* Then the value of `pathMap` should be ['/var/www/', '/Users/xx/']
*/
pathMap?: PathMap
/**
* The script file to be used for importing ViewLauncher.
* If you omit this option, only the transformation will be applied.
*/
entry?: string
} & ViewLauncherOptions
See more about the ViewLauncherOptions
at here.
Also, you can find the full demo at here.