A light weight vue plugin built groundup.
Code Sandbox: Link
npm i @vuesimple/vs-loader
<template>
<vs-loader variant="pulse"></vs-loader>
</template>
<script>
import VsLoader from '@vuesimple/vs-loader';
export default {
components: {
VsLoader,
},
};
</script>
<script src="https://unpkg.com/@vuesimple/vs-loader/dist/vs-loader.min.js"></script>
// Main/Entry file
app.use(VsLoader.plugin);
<template>
<vs-loader variant="pulse"></vs-loader>
</template>
Nuxt Code Snippet
After installation,
-
Create a file
/plugins/vs-loader.js
import Vue from 'vue'; import VsLoader from '@vuesimple/vs-loader'; Vue.component('vs-loader', VsLoader);
-
Update
nuxt.config.js
module.exports = { ... plugins: [ { src: '~plugins/vs-loader', mode: 'client' } ... ] }
-
In the page/ component
<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 incomponent:{VsLoader}
and use it within component, without globally installing in plugin folder.
Name | Type | Default | Description |
---|---|---|---|
variant | String | pulse |
Variants: pulse , dots , inline . |
color | String | #1f73b7 |
Loader color. |
size | Number | 10 |
Loader size. |
center | Boolean | - | Center aligns the loader wrt the parent div. |