Loader

A simple vue loader. Perfect for all your loader scenarios.

DemoGitHub

Install ​

npm i @vuesimple/vs-loader

npm i @vuesimple/vs-loader

Usage ​

<template>
  <vs-loader variant="pulse"></vs-loader>
</template>

<script>
  import VsLoader from '@vuesimple/vs-loader';

  export default {
    components: {
      VsLoader,
    },
  };
</script>

<template>
  <vs-loader variant="pulse"></vs-loader>
</template>

<script>
  import VsLoader from '@vuesimple/vs-loader';

  export default {
    components: {
      VsLoader,
    },
  };
</script>

CDN ​

<script src="https://unpkg.com/@vuesimple/vs-loader@<version>/dist/index.min.js"></script>

<script src="https://unpkg.com/@vuesimple/vs-loader@<version>/dist/index.min.js"></script>

// Main/Entry file
app.use(VsLoader.plugin);

// Main/Entry file
app.use(VsLoader.plugin);

<template>
  <vs-loader variant="pulse"></vs-loader>
</template>

<template>
  <vs-loader variant="pulse"></vs-loader>
</template>

Nuxt.js ​

After installation,

• Create a file /plugins/vs-loader.js

  javascript

  import Vue from 'vue';
  import VsLoader from '@vuesimple/vs-loader';
  
  Vue.component('vs-loader', VsLoader);

  import Vue from 'vue';
  import VsLoader from '@vuesimple/vs-loader';
  
  Vue.component('vs-loader', VsLoader);

• Update nuxt.config.js

  javascript

  module.exports = {
    ...
    plugins: [
      { src: '~plugins/vs-loader', mode: 'client' }
      ...
    ]
  }

  module.exports = {
    ...
    plugins: [
      { src: '~plugins/vs-loader', mode: 'client' }
      ...
    ]
  }

• In the page/ component

  html

  <template>
    <vs-loader variant="pulse"></vs-loader>
  </template>

  <template>
    <vs-loader variant="pulse"></vs-loader>
  </template>

Note

• For older Nuxt versions, use <no-ssr>...</no-ssr> tag.
• You can also do import VsLoader from '@vuesimple/vs-loader' & add in component:{VsLoader} and use it within component, without globally installing in plugin folder.

Props ​