vue3-loading-shimmer

# Basic

If you want to use the package with a CDN, you need to include the CDN link inside a <script> tag and then insert this tag into your HTML file:

<script src="https://unpkg.com/vue"></script>
<script src='https://unpkg.com/vue3-loading-shimmer'></script>
xml

Next, you need to register the component.

<script>
const { createApp } = Vue;
const App = {
  //Component code...
};
const app = createApp(App);
app.component("vue3-loading-shimmer", Vue3LoadingShimmer);
app.mount("#app");
</script>
xml

After completing the steps to include the component in your project, you will be able to use it immediately. Here is an example of how to use it:

<div>
  <vue3-loading-shimmer class="my-class" />
</div>
xml

<style>
.my-class {
  height: 1rem;
  width: 100%;
}
</style>xml

# Module System

To install the package package in your Vue.js project, you can use the following command:

npm install vue3-loading-shimmer --savebash

This will download and install the package and save it to your package.json file as a dependency.

Global Registration

Once the package is installed, you can register it globally in your Vue.js application by importing it and registering it as a component globally

import { createApp } from "vue";
import App from "./App.vue";
import Shimmer from "vue3-loading-shimmer";

const app = createApp(App);

app.component("vue3-loading-shimmer", Vue3LoadingShimmer);
js

After registering the component globally, you can use it in any component template in your application by referencing it with its tag name.

<template>
  <vue3-loading-shimmer class="my-class"/>
</template>

<style>
.my-class {
  height: 1rem;
  width: 100%;
}
</style>
xml

Local Registration

Alternatively, you can register the component locally in a specific component by importing it and defining it in the components components property of the component definition object.

import { defineComponent } from "vue";
import Package from "package";

export default defineComponent({
  components: {
    Shimmer,
  },
});

js

After registering the component locally, you can use it in the template of that component by referencing it with its tag name.

<template>
  <vue3-loading-shimmer class="my-class"/>
</template>

<style>
.my-class {
  height: 1rem;
  width: 100%;
}
</style>
xml

Introduction Options