Neoteric Plumbing Mishap

    rollup-plugin-vuetify

    0.2.4 • Public • Published

    rollup-plugin-vuetify


    The plugin is a missing autoloader of vuetify components.

    It eliminates the pain of manually importing all of the Vuetify components you use. It also allows you to use tree shaking as efficiently as possible.

    This is a must if you decide to write your vuetify-based library.

    Installation

    Install the plugin with npm:

    npm install --save-dev vue-template-compiler rollup-plugin-vuetify 

    Note: vue-template-compiler version must match your vue version

    Configuration

    There is a configuration example for building a simple js library:

    const { rollup } = require("rollup");
    const vue = require("rollup-plugin-vue");
    const postcss = require("rollup-plugin-postcss");
    const vuetify = require("rollup-plugin-vuetify");
     
    const build = async () => {
      try {
        const bundle = await rollup({
          input: "src/index.js",
          external: ["vue", "vuetify/lib"],
          plugins: [postcss(), vue(), vuetify()],
        });
     
        bundle.write({
          format: "esm",
          file: "dist/bundle.js",
        });
      } catch (e) {
        console.error(e);
      }
    };
     
    build();

    You can also find the typescript example here demo/rollup.js

    Demo

    The demo/ folder and html preview were created as an example of how a project can be configured and what types of components can be used.

    ├── dist
    │   ├── browser.js                      <- fully compiled application without vue but with vuetify
    │   ├── index.html                      <- demo with application to show that everything is ok
    │   ├── ts.js                           <- bundled components with @rollup/plugin-typescript
    │   └── ts2.js                          <- bundled components with rollup-typescript-2
    ├── rollup.js                           <- rollup configuration
    ├── src
    │   ├── App.vue                         <- application component
    │   ├── Components                      <- components with all possible scenarios
    │   │   ├── Complex.vue                 <- component with partial manual import
    │   │   ├── Decorated.vue               <- component decorated with `vue-property-decorator`
    │   │   ├── Empty.vue                   <- component without any properties, can be used as a wrapper
    │   │   ├── EmptyDecorator.vue          <- component with "empty" decorator
    │   │   ├── ExportByReference.vue       <- component with export defined previously as a variable
    │   │   ├── Extended.vue                <- component created with Vue.extend()
    │   │   ├── External                    <- component splitted into separate files
    │   │   │   ├── Component.vue
    │   │   │   ├── index.js
    │   │   │   ├── script.js
    │   │   │   ├── style.css
    │   │   │   └── template.html
    │   │   ├── Simple.vue                  <- simple generic component
    │   │   ├── WithEmptyScript.vue         <- component with empty `script` section
    │   │   ├── WithoutScript.vue           <- component without `script` section, best choice for template chunks
    │   │   └── index.js
    │   ├── index.js                        <- entry point to bundle components as es module without vue and vuetify
    │   ├── main.js                         <- entry point of application
    │   └── shims-vue.d.ts
    └── tsconfig.json
    

    Supported Feartures

    • Typescript >2.x and vue-property-decorator (docs);
    • Components created with Vue.extend() (docs);
    • Components separated on the external files (docs, example);
    • Autoloading of Vuetify 1.x and 2.x components;
    • Partial import. All missing components will be added to the final bundle. This option is great for existing projects;

    Known Caveats

    Under The Hood

    It works similarly to the vuetify-loader. But plugin uses AST transformation under the hood. It allows you to get rid of extra code and optimize your final bundle even more.

    Install

    npm i rollup-plugin-vuetify

    DownloadsWeekly Downloads

    511

    Version

    0.2.4

    License

    MIT

    Unpacked Size

    16.1 kB

    Total Files

    8

    Last publish

    Collaborators

    • vatson