h2atecnologia / vue-plugin-template

🚀 Solid foundation to start a Vue plugin with the best developer experience and a focus on performance

vue-plugin-template

✨ DX experience & lighter plugins 🚀

Usage

vue init posva/vue-plugin-template my-awesome-plugin
# Answer some questions
cd my-awesome-plugin
yarn
npm run dev
# 🎉

Features

Smaller plugin size

Bundle with Rollup. This produces bundles that are easier to debug and more lightweight but is less customizable than Webpack. But don't worry you can also use Webpack instead of Rollup 😉

Single file components

Write your components using .vue files. Those will be compiled into render functions when building your plugin to make them compatible everywhere.

JSX

Add jsx to your js files and they will be compiled as well.

ES6

Use the future features of Javascript.

Pre commit lint and fix

Runs eslint and stylefmt/stylelint before each commit on modified files only and try to fix them automatically to prevent failing CI builds 😉.

Advanced testing

Get the best developer experience by testing the components at the same time you interact with them. Embrace Visual testing 😎

Next generation CSS

Use PostCSS by default with CSSNext to bring you future features of CSS.

SASS

You still need a preprocessor? Choose Webpack as the bundler and access more advanced features

Development-only features

Add warnings to improve the DX of your plugin that are removed when bundling in production mode:

if (process.env.NODE_ENV !== 'production' && warningCondition) {
  warn('You should be doing things this way instead: ...')
}

Refer to Dist files for more information.

Road-map

• Add flow typings
• .github folder
• Add question for tests
• Add question for visual tests
• Add question for contribution guidelines
• Add question for the license
• Add question for linting

Something you would like to see on the template but not in the road-map? Fire an Issue!

FAQ

Dist files

Q: Why are there 3 different generated files for js in the dist folder?

A: Each one serves its purpose: the non minified file (lib.js) replaces process.env.NODE_ENV by "development" to keep development only features like warning (pretty much like Vue warnings). The CommonJS file (lib.common.js) is meant to be used with bundlers like Webpack or Rollup and keeps the variable process.env.NODE_ENV so it can be replaced by bundlers. The minified version (lib.min.js) strips off development features by replacing process.env.NODE_ENV by "production".

Q: When should I choose Rollup over Webpack for the bundler?

A: If next-css isn't enough for you, it's better to use Webpack. If a feature is missing in vue-rollup-plugin but present on vue-loader you can benefit from it by using Webpack. On the other hand if you're building a simple plugin with few components, you should use Rollup as the bundler to get more lightweight lib sizes.

Contributing

See CONTRIBUTING.md for help about developing this template

License

MIT