📲 On-demand components auto importing for Vue

Last update: Jul 2, 2022

unplugin-vue-components

NPM version

On-demand components auto importing for Vue.

Features
  • 💚 Supports both Vue 2 and Vue 3 out-of-the-box.
  • ⚡️ Supports Vite, Webpack, Vue CLI, Rollup and more, powered by unplugin.
  • 🏝 Tree-shakable, only registers the components you use.
  • 🪐 Folder names as namespaces.
  • 🦾 Full TypeScript support.
  • 🌈 Built-in resolvers for popular UI libraries.
  • 😃 Works perfectly with unplugin-icons.


Installation

npm i unplugin-vue-components -D

vite-plugin-components has been renamed to unplugin-vue-components, see the migration guide.

Vite
// vite.config.ts
import Components from 'unplugin-vue-components/vite'

export default defineConfig({
  plugins: [
    Components({ /* options */ }),
  ],
})


Rollup
// rollup.config.js
import Components from 'unplugin-vue-components/rollup'

export default {
  plugins: [
    Components({ /* options */ }),
  ],
}


Webpack
// webpack.config.js
module.exports = {
  /* ... */
  plugins: [
    require('unplugin-vue-components/webpack')({ /* options */ })
  ]
}


Nuxt

You don't need this plugin for Nuxt, use @nuxt/components instead.


Vue CLI
// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      require('unplugin-vue-components/webpack')({ /* options */ }),
    ],
  },
}


Usage

Use components in templates as you would usually do, it will import components on demand and there is no import and component registration required anymore! If you register the parent component asynchronously (or lazy route), the auto-imported components will be code-split along with their parent.

Basically, it will automatically turn this

<template>
  <div>
    <HelloWorld msg="Hello Vue 3.0 + Vite" />
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

into this

<template>
  <div>
    <HelloWorld msg="Hello Vue 3.0 + Vite" />
  </div>
</template>

<script>
import HelloWorld from './src/components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

TypeScript

To have TypeScript support for auto-imported components, there is a PR to Vue 3 extending the interface of global components. Currently, Volar has supported this usage already, if you are using Volar, you can change the config as following to get the support.

Components({
  dts: true, // enabled by default if `typescript` is installed
})

Once the setup is done, a components.d.ts will be generated and updates automatically with the type definitions. Feel free to commit it into git or not as you want.

Make sure you also add components.d.ts to your tsconfig.json under includes.

Importing from UI Libraries

We have several built-in resolvers for popular UI libraries like Vuetify, Ant Design Vue, and Element Plus, where you can enable them by:

Supported Resolvers:

// vite.config.js
import ViteComponents, {
  AntDesignVueResolver,
  ElementPlusResolver,
  VantResolver,
} from 'unplugin-vue-components/resolvers'

// your plugin installation
Components({
  resolvers: [
    AntDesignVueResolver(),
    ElementPlusResolver(),
    VantResolver(),
  ]
})

You can also write your own resolver easily:

Components({
  resolvers: [
    // example of importing Vant
    (name) => {
      // where `name` is always CapitalCase
      if (name.startsWith('Van'))
        return { importName: name.slice(3), path: 'vant' }
    }
  ]
})

If you made other UI libraries configured, please feel free to contribute so it can help others using them out-of-box. Thanks!

Migrate from vite-plugin-components

package.json

{
  "devDependencies": {
-   "vite-plugin-components": "*",
+   "unplugin-vue-components": "^0.14.0",
  }
}

vite.config.json

- import Components, { ElementPlusResolver } from 'vite-plugin-components'
+ import Components from 'unplugin-vue-components/vite'
+ import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default {
  plugins: [
    /* ... */
    Components({
      /* ... */

      // `customComponentsResolvers` has renamed to `resolver`
-     customComponentsResolvers: [
+     resolvers: [
        ElementPlusResolver(),
      ],

      // `globalComponentsDeclaration` has renamed to `dts`
-     globalComponentsDeclaration: true,
+     dts: true,

      // `customLoaderMatcher` is depreacted, use `include` instead
-     customLoaderMatcher: id => id.endsWith('.md'),
+     include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
    }),
  ],
}

Configuration

The following show the default values of the configuration

Components({
  // relative paths to the directory to search for components.
  dirs: ['src/components'],

  // valid file extensions for components.
  extensions: ['vue'],
  // search for subdirectories
  deep: true,
  // resolvers for custom components
  resolvers: [],

  // generate `components.d.ts` global declrations, 
  // also accepts a path for custom filename
  dts: false,

  // Allow subdirectories as namespace prefix for components.
  directoryAsNamespace: false,
  // Subdirectory paths for ignoring namespace prefixes
  // works when `directoryAsNamespace: true`
  globalNamespaces: [],

  // filters for transforming targets
  include: [/\.vue$/, /\.vue\?vue/],
  exclude: [/node_modules/, /\.git/, /\.nuxt/],
})

Example

See the Vitesse starter template.

Thanks

Thanks to @brattonross, this project is heavily inspired by vite-plugin-voie.

License

MIT License © 2020-PRESENT Anthony Fu

GitHub

https://github.com/antfu/unplugin-vue-components
Comments
  • 1. vscode can't "go to definition" for auto imported vue components

    If discussions were enabled for this project I would have started one instead of creating an issue.

    I love unplugin-vue-components. Given the regularity of directory structure, file naming and auto naming of the components it makes sense just to infer the imports and make them implicit. However, I realized that I often "jump to definition" in vscode. Apparently vscode was doing that based on import statements and doesn't work without them.

    I am hoping that someone who knows how vscode works can provide a solution for this that can be added to unplugin-vue-components.

    Reviewed by julie777 at 2021-10-13 01:01
  • 2. How to use this with unit tests?

    As this is a vite plugin it won't be utilized when running unit test and all components won't be transformed. Is there any trick to get this working with the vue-test-utils / jest?

    Reviewed by eratio08 at 2021-05-10 08:31
  • 3. How to automatically import components on demand from an UI library?

    If I want to automatically import components on demand from an UI library like ant-design-vue or element-plus , what should I do? Would you give an example in the document?

    Reviewed by yangss3 at 2021-02-26 05:18
  • 4. Dynamic component support

    Is this plugin support dynamic components? Such as using <component :is="" /> I tried to use this plugin using dynamic components, but it's not rendering.

    Example:

    <!-- rendered to <mybutton /> -->
    <component :is="'myButton'" />
    
    <!-- correctly rendered -->
    <myButton>
    
    Reviewed by calvin-cg at 2020-12-03 17:23
  • 5. Volar cannot deduce component type correctly

    Question

    // package.json
    {
      "name": "xxx",
      "version": "0.0.0",
      "scripts": {
        "dev": "vite",
        "build": "vue-tsc --noEmit && vite build",
        "preview": "vite preview --port 5050",
        "test:unit": "vitest --environment jsdom",
        "test:e2e": "start-server-and-test preview http://127.0.0.1:5050/ 'cypress open'",
        "test:e2e:ci": "start-server-and-test preview http://127.0.0.1:5050/ 'cypress run'",
        "typecheck": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
        "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
        "preinstall": "npx only-allow pnpm -y",
        "prepare": "husky install",
        "release": "standard-version"
      },
      "dependencies": {
        "@vueuse/core": "^8.2.5",
        "pinia": "^2.0.13",
        "vue": "^3.2.31",
        "vue-router": "^4.0.14"
      },
      "devDependencies": {
        "@arco-design/web-vue": "^2.23.0",
        "@commitlint/cli": "^16.2.3",
        "@commitlint/config-conventional": "^16.2.1",
        "@rushstack/eslint-patch": "^1.1.0",
        "@types/jsdom": "^16.2.14",
        "@types/node": "^16.11.26",
        "@vitejs/plugin-vue": "^2.3.1",
        "@vue/eslint-config-prettier": "^7.0.0",
        "@vue/eslint-config-typescript": "^10.0.0",
        "@vue/test-utils": "^2.0.0-rc.18",
        "@vue/tsconfig": "^0.1.3",
        "cypress": "^9.5.3",
        "eslint": "^8.5.0",
        "eslint-plugin-cypress": "^2.12.1",
        "eslint-plugin-vue": "^8.2.0",
        "husky": "^7.0.4",
        "jsdom": "^19.0.0",
        "less": "^4.1.2",
        "lint-staged": "^12.3.7",
        "prettier": "^2.5.1",
        "standard-version": "^9.3.2",
        "start-server-and-test": "^1.14.0",
        "stylelint": "^14.6.1",
        "stylelint-config-prettier": "^9.0.3",
        "stylelint-config-rational-order": "^0.1.2",
        "stylelint-config-standard": "^25.0.0",
        "stylelint-order": "^5.0.0",
        "typescript": "~4.6.3",
        "unplugin-auto-import": "^0.7.1",
        "unplugin-vue-components": "^0.19.2",
        "vite": "^2.9.1",
        "vitest": "^0.8.1",
        "vue-tsc": "^0.33.9"
      }
    }
    
    // vite.config.ts
    import { fileURLToPath, URL } from 'url'
    
    import { defineConfig } from 'vite'
    import vue from '@vitejs/plugin-vue'
    
    import AutoImport from 'unplugin-auto-import/vite'
    import Components from 'unplugin-vue-components/vite'
    import { ArcoResolver } from 'unplugin-vue-components/resolvers'
    
    // https://vitejs.dev/config/
    export default defineConfig({
      plugins: [
        vue(),
        AutoImport({
          dts: 'src/auto-imports.d.ts',
          eslintrc: { enabled: true },
          imports: ['vue', 'vue-router', '@vueuse/core']
        }),
        Components({
          dirs: ['src/components'],
          dts: 'src/components.d.ts',
          resolvers: [ArcoResolver({ importStyle: 'less', resolveIcons: true })]
        })
      ],
      resolve: {
        alias: {
          '@': fileURLToPath(new URL('./src', import.meta.url))
        }
      }
    })
    
    image image image image image

    Solution

    image image
    Reviewed by jsonleex at 2022-04-14 05:49
  • 6. !fix: shouldn't using component resolver to resolve directive

    • breaking change: change to new component resolver interface, and separate resolver based on its type.
    • dynamic import Babel, as peer dependencies.
    • change some anonymous function to named function

    If I use the v-lazy directive it will resolve to la:zy in unplugin-icons's resolver which will cause an error, so I think we should separate the resolver based on its type.

    Reviewed by hannoeru at 2021-10-26 13:08
  • 7. Support Vue 2

    Just following the docs while using Vue 2. The plugin recognizes the component path, but doesn't seem to import the components.

    ViteComponents({ dirs: ['./src/components'], })

    Unknown custom element: <Test> - did you register the component correctly? For recursive components, make sure to provide the "name" option

    <template>
        <div>
            test
        </div>
    </template>
    
    <script>
        export default {
            name: 'Test'
        }
    </script>
    
    <style lang="scss" scoped>
    
    </style>
    
    Reviewed by pitcher-maarten at 2021-02-19 10:43
  • 8. No components found with Jenkins

    Hi, Anthony

    In my company project, when I run yarn build to build it in Local or Server, no problem.

    But when I use CI / CD with Jenkins, It throw the log "[unplugin-vue-components] no components found".

    1

    Although it doesn't affect the building process, but these global components cannot be rendered.

    I can't found how to fix it, this is my config, can you help me?

    // vite.config.ts
    import components from 'unplugin-vue-components/vite'
    // ...
    export default defineConfig({
      // ...
      plugins: [
        // ...
        components({
          dirs: [
            'src/components',
            'src/components/Admin',
            'src/components/Admin/GroupPanel',
          ],
          extensions: ['vue', 'ts'],
          deep: false,
          dts: false,
        }),
        // ...
      ],
    })
    
    Reviewed by chengpeiquan at 2021-11-22 01:59
  • 9. Getting a cryptic error while trying to make it work for @ionic/vue components.

    Here's a repository with the minimal example: https://github.com/markomarkovic/temporary-ionic-vue-project

    Ionic uses vue-cli-service, so I've configured the plugin in the vue.config.js and it gets executed and reads the components as expected, but then it dies with a cryptic error that I don't get at all.

    ❯ yarn run serve yarn run v1.22.5 $ vue-cli-service serve INFO Starting development server... 40% building 43/46 modules 3 active /tmp/tmp.lfuXBTXRpL/android-app/node_modules/events/events.js######### NAME TO IMPORT IonRouterOutlet ######### NAME TO IMPORT IonApp 40% building 85/107 modules 22 active ...-app/node_modules/@ionic/core/dist/esm-es5/hardware-back-button-4a6b37fb.js######### NAME TO IMPORT IonTitle ######### NAME TO IMPORT IonToolbar ######### NAME TO IMPORT IonHeader ######### NAME TO IMPORT IonContent ######### NAME TO IMPORT IonPage 98% after emitting CopyPlugin

    ERROR Failed to compile with 1 error 8:23:58 PM

    error in js/app.js

    /tmp/tmp.lfuXBTXRpL/android-app/node_modules/unplugin/dist/webpack/loaders/transform.js??ref--38-0!/tmp/tmp.lfuXBTXRpL/android-app/node_modules/unplugin/dist/webpack/loaders/transform.js??ref--38-0!/tmp/tmp.lfuXBTXRpL/android-app/node_modules/cache-loader/dist/cjs.js??ref--12-0!/tmp/tmp.lfuXBTXRpL/android-app/node_modules/babel-loader/lib/index.js!/tmp/tmp.lfuXBTXRpL/android-app/node_modules/vue-loader-v16/dist/templateLoader.js??ref--6!/tmp/tmp.lfuXBTXRpL/android-app/node_modules/cache-loader/dist/cjs.js??ref--0-0!/tmp/tmp.lfuXBTXRpL/android-app/node_modules/vue-loader-v16/dist/index.js??ref--0-1!/tmp/tmp.lfuXBTXRpL/android-app/src/App.vue?vue&type=template&id=7ba5bd90 Cannot read property 'startsWith' of null

    No issues found.

    Any help with this is welcome.

    Reviewed by markomarkovic at 2021-09-14 18:30
  • 10. Missing style when import some components from ant-design-vue

    I already set AntDesignVueResolver in vite.config.ts

    import { Form, Input, Button, Row, Col, message, notification } from "ant-design-vue";
    

    Above code, only message and notification component have not style, other components are normal;

    message.info('test');
    notification.info({
      description: "test",
      message: "content",
    });
    

    Above code can run,but just missing style.Why? Is my configuration incorrect?

    Reviewed by weeksun23 at 2021-08-13 10:20
  • 11. feat: auto import of style files

    Addition for #26.

    Your plugin is awesome.

    1. I do not have luck to make https://github.com/anncwb/vite-plugin-style-import working.
    2. No need to use yet another plugin if in any case the goal is the same — import on demand. Style it is integral part of component.
    3. Your package has less dependencies, I don't need another set.

    So, I decided to add property stylePath to ComponentInfo.

    Only Vue 3 is supported by intention.

    Example for element-plus:

          customComponentResolvers: [
            name => {
              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
              // @ts-ignore
              if (name.startsWith("El")) {
                const partialName = name[2].toLowerCase() + name.substring(3).replace(/[A-Z]/g, l => `-${l.toLowerCase()}`)
                return {
                  path: `element-plus/es/el-${partialName}`,
                  stylePath: `element-plus/packages/theme-chalk/src/${partialName}.scss`,
                }
              }
              return null
            },
    

    Two important notes: official documentation of element plus is wrong and you should not follow it if you want to get smaller production build. See https://github.com/element-plus/element-plus/issues/1492 and https://github.com/element-plus/element-plus/issues/1477

    1. Do not use element-plus. Use element-plus/es instead to make sure that tree shaking works. It is Vite responsibility to transform modern syntax to old one if needed.
    2. Do not import CSS files (element-plus/lib/theme-chalk/*.css). Instead, install sass and import SCSS (element-plus/packages/theme-chalk/src/*.scss). Issue is that CSS files are not intended for on-demand loading. For example, autocomplete.css contains styles also for input, and if you use el-input in addition to el-autocomplete, you will get styles twice. It is Vite responsibility to bundle CSS files.
    Reviewed by develar at 2021-03-03 09:55
  • 12. vuecli下安装运行报错

    node_modules/unplugin-vue-components/dist/chunk-MF6CXARB.js:628 compiler.watching.invalidate(); ^

    TypeError: Cannot read property 'invalidate' of undefined at /Users/gaoyan/qwe/yh/node_modules/unplugin-vue-components/dist/chunk-MF6CXARB.js:628:39 at processTicksAndRejections (node:internal/process/task_queues:78:11) node:internal/process/promises:246 triggerUncaughtException(err, true /* fromPromise */);

    image
    Reviewed by weiweishiyi at 2022-06-26 07:19
  • 13. How to expose Vuetify variables using VuetifyResolver?

    I am migrating my project from webpack to vite. It is UI library written with Vue 2 and Vuetify. Previously I was able to edit Vuetify sass variables in order to achieve the look I want, but with Vite these changes doesn't work. As described here, it is only available when using Vuetify Loader (webpack plugin).

    Interestingly though that in my build everything is ok, even though I am building it with the same configuration. But in dev mode my components are a little bit different than it should be.

    Reviewed by Rusinas at 2022-06-24 11:07
  • 14. How to enable dynamic import with AntDeisgnVueResolver?

    When I use this plugin which does not enable dynamic import.

    The following is my config and analysis report. code1 截圖 2022-06-24 下午3 46 05

    it looks like it bundles the full package, but I only use parts of components of AntDesign.

    Reviewed by W-Ace at 2022-06-24 07:56
  • 15. How to work with vue-jest?

    I have a vue 3 project that uses vue-jest. When I run the tests, I get an error that all the components are missing that are being auto-imported by unplugin.

    I found a work around adding in a global parameter with all the components. (components is being imported from another object)

    describe('Authenticator', () => {
      it('Authenticator Exists', () => {
        const wrapper = render(Authenticator, {
          global: {
            components,
          },
        });
    
        expect(wrapper).toBeTruthy();
      });
    

    You can see this working here.

    Is there an easier way of getting this working? Right now I cannot move to vitest.

    Reviewed by ErikCH at 2022-06-23 20:03
  • 16. `` when running in Vitest + Vue 3 + Vue test utils `{ shallow: true }`

    Issue

    When using single/multiple stubs option with vue test utils it renders the whole inner html of the component, like so:

    import { describe, it, expect } from 'vitest';
    import { mount } from '@vue/test-utils';
    
    import SomeComponent from './SomeComponent.vue';
    
    test('stubs component', () => {
      const wrapper = mount(SomeComponent, {
        global: {
          stubs: {
            SomeComponent: true
          }
        }
      })
    
      console.log(wrapper.html())
      **Expected**
      /*
        <some-component-header-stub></some-component-header-stub>
        <h1>Welcome to Vue.js 3</h1>
      */
    
      **Actual**
      /*
        <div class="text-2xl font-bold">This header should be stubbed</div>
        <h1>Welcome to Vue.js 3</h1>
      */
    
      expect(wrapper.html()).toContain('Welcome to Vue.js 3')
    })
    

    When using with shallow mount the children component names become anonymous-stub:

    test('shallow stubs out all child components', () => {
      const wrapper = mount(ComplexComponent, {
        shallow: true
      })
    
      console.log(wrapper.html())
      **Expected**
      /*
        <h1>Welcome to Vue.js 3</h1>
        <complex-a-stub></complex-a-stub>
        <complex-b-stub></complex-b-stub>
        <complex-c-stub></complex-c-stub>
      */
    
      **Actual**
      /*
        <h1>Welcome to Vue.js 3</h1>
        <anonymous-stub></anonymous-stub>
        <anonymous-stub></anonymous-stub>
        <anonymous-stub></anonymous-stub>
      */
    })
    

    both cases are wrong, is there a way to make this work?

    Use Case

    When using tailwind you can catch style changes with snapshot tests. which I assume are much faster, than cypress component tests.

    And you only want to see the styles of the current component under test, so as not to make tests fail when the child element styles update. to avoid flaky tests.

    as a workaround you can import components directly, without using unplugin-vue-components and it works, but that obviously defeats the purpose of this plugin.

    Thank you

    This plugin saves a ton of time and boilerplate would be awesome to get this little bit to work :)

    I'd give it a show with a PR if you could just point me in the direction

    Reviewed by Neophen at 2022-06-21 03:42
Import types in Vue SFC for defineProps

vite-plugin-vue-type-imports Enables you to import types and use them in your defineProps and defineEmits ⚠️ This Plugin is still in Development and t

Jul 1, 2022
Vite-vue-ts-sample - Sample repo of vue3, vite, and typescript

Vue 3 + Typescript + Vite This template should help get you started developing with Vue 3 and Typescript in Vite. The template uses Vue 3 <script setu

Jan 5, 2022
Auto import APIs on-demand for Vite, Webpack, Rollup and esbuild

unplugin-auto-import Auto import APIs on-demand for Vite, Webpack, Rollup and esbuild. With TypeScript support. Powered by unplugin. without import {

Jul 5, 2022
Prototype of BootstrapVue loader, webpack plugin for automatic components and directives importing for treeshaking.
Prototype of BootstrapVue loader, webpack plugin for automatic components and directives importing for treeshaking.

A Webpack plugin for automatic BootstrapVue components and directives importing, mainly for treeshaking. Reduce the bundle size and achieve even distribution of chunks size, without the need for manual importing each used component.

Mar 4, 2022
A Vue component for importing inline SVG icons from different popular icon packs easily.

A Vue component for importing inline SVG icons from different popular icon packs easily.

Jun 23, 2022
A webpack loader i18n solution for Vue (Nuxt) with auto generated keysA webpack loader i18n solution for Vue (Nuxt) with auto generated keys

vue-i18n-loader - another webpack loader i18n solution for Vue (Nuxt) with auto generated keys. Currently under development, pull requests and suggest

Feb 7, 2022
A plug-in that imports component library styles on demand

vite-plugin-style-import English | 中文 A plug-in that imports component library styles on demand Why only import styles Because vite itself has importe

Jun 24, 2022
A plug-in that imports component library styles on demand.it is fast

vite-plugin-style-import English | 中文 A plug-in that imports component library styles on demand Why only import styles Because vite itself has importe

Jul 1, 2022
Store specific tweets on the Arweave blockchain on demand

permatweet Store specific tweets on the Arweave blockchain on demand. Develop Node version Make sure to use the node version specified in .nvmrc eithe

Jun 1, 2022
vue instant allows you to easily create custom search controls with auto suggestions for your vue 2 applications
vue instant allows you to easily create custom search controls with auto suggestions for your vue 2 applications

Vue Instant! vue instant allows you to easily create custom search controls with auto suggestions for your vue 2 applications. Table of contents Examp

Jun 21, 2022
vue-i18n-loader - another webpack loader i18n solution for Vue (Nuxt) with auto generated keys.

vue-i18n-loader - another webpack loader i18n solution for Vue (Nuxt) with auto generated keys. Currently under development, pull requests and suggest

Feb 7, 2022
Boilerplate for Chrome extension using Vue.js and Webpack with auto-reload enabled.
Boilerplate for Chrome extension using Vue.js and Webpack with auto-reload enabled.

vue-chrome-extension-boilerplate Boilerplate for Chrome extension using Vue.js and Webpack with auto-reload enabled. Scripts // install dependencies n

Jun 12, 2022
A Vue.js directive for animating an element from height: auto; to height: 0px; and vice-versa.

v-show-slide A Vue.js directive for animating an element from height: auto to height: 0px and vice-versa. ?? 3kb (1kb gzipped) ?? No dependencies ?? T

Mar 29, 2022
Auto responsive grid layout library for Vue.
Auto responsive grid layout library for Vue.

autoresponsive-vue Auto responsive grid layout library for Vue. Examples Live demo & docs: xudafeng.github.io/autoresponsive-vue Installation $ npm i

Mar 24, 2022
Vue Auto Loan Calculator

Vue Auto Loan Calculator

Jul 20, 2021
A rich text editor as a Vue component, with image and auto-save support

Vue Trix Rich Text Editor A Vue wrapper around the Trix rich-text editor, with support for images and auto-save. Note: No true two-one binding. While

May 22, 2022
A Vue.js directive for animating an element from height: auto; to height: 0px; and vice-versa.

v-show-slide A Vue.js directive for animating an element from height: auto to height: 0px and vice-versa. ?? 3kb (1kb gzipped) ?? No dependencies ?? T

Mar 29, 2022
Auto responsive grid layout library for Vue.
Auto responsive grid layout library for Vue.

autoresponsive-vue Auto responsive grid layout library for Vue. Examples Live demo & docs: xudafeng.github.io/autoresponsive-vue Installation $ npm i

Mar 24, 2022
Auto compile vue file on save

vue-autocompile package Auto compile vue file on save. Add the parameters on the first line of the vue file. out (string): relative path to html file

Jul 30, 2020