darkc0der

vue-skeletor

  "description": "Vue 3 Skeleton Loading component.",

    "playground": "parcel playground/index.html --out-dir public",

    "test": "echo \"Error: no test specified\" && exit 1",

    "build": "rollup -c rollup.config.js"

    "url": "https://github.com/DarkC0der11/vue-skeletor"

    "@vue/babel-plugin-jsx": "^1.0.0-rc.3",

    "rollup-plugin-typescript": "^1.0.1",

# 💀 Vue Skeletor (Vue 3 Skeleton Loading component)

Vue 3 adaptive skeleton loading component that will match your typography. 

[Codesandbox Card Example](https://codesandbox.io/s/epic-ishizaka-nl9z3?file=/src/App.vue) 

Skeletons are used to mimic how the real content would look, so in order to create nice skeleton you would have to manually create squares, circles and position/size them to match your real component and keep it updated whenever you change it. 

Wouldn't be nice if you had a skeleton that automatically adjusts to your existing components layout? I think it would =) so the Vue Skeletor comes to rescue. 

Instead of creating separate skeleton components you can inject skeletons directly into your existing components.

And that's it, the text skeletons will automatically catch up with the styles you defined for the title and text elements.

Import the component locally or register it globally if you like.

  // Import the styles in your main entry file 

  import 'vue-skeletor/dist/vue-skeletor.css';

  import { Skeletor } from 'vue-skeletor';

  app.component(Skeletor.name, Skeletor);

If you want you can globally turn off the shimmer animation using the Skeletor Plugin

  import VueSkeletor from 'vue-skeletor';

When you install skeletor as Plugin it `provides` global config to your app and you get access to 'useSkeletor' composable which will inject the `skeletor` config object through which you can set any global config at runtime.

  import { useSkeletor } from 'vue-skeletor';

      // In your setup function use the composable

Width of your skeleton, can be a number or css string value.

Height of your skeleton, can be a number or css string value.

When you set height, your skeleton automatically becomes a rect with `display: 

block` meaning it will no longer adapt to your typography, which is useful for 

creating non text block level skeletons like image placeholders, buttons, and e.t.c.

Size sets both `width` & `height` to simplify creating square/circle shapes

As the name suggest it just turns the element into a circle, use only when `width` & `height` or size is set.

Makes rectangular skeletons fully rounded, useful when creating rounded button or chip 

		{
		"name": "vue-skeletor",
		"version": "1.0.5",
		"version": "1.0.6",
		"description": "Vue 3 Skeleton Loading component.",
		@@ -5,0 +5,0 @@ "main": "dist/vue-skeletor.cjs.js",

		@@ -61,14 +61,14 @@ # 💀 Vue Skeletor (Vue 3 Skeleton Loading component)

		Import the component locally or register it globally if you like.
		First import the Skeletor styles

		```js
		// Import the styles in your main entry file
		import 'vue-skeletor/dist/vue-skeletor.css';
		```

		Option 1 - Register Locally

		```js
		// Import the component
		// SomeComponent.vue
		import { Skeletor } from 'vue-skeletor';

		// Register it
		export default {
		@@ -79,2 +79,11 @@ components: { Skeletor }

		Option 2 - Register Globally

		```js
		// main.js
		import { Skeletor } from 'vue-skeletor';

		app.component(Skeletor.name, Skeletor);
		```

		```html
		@@ -81,0 +90,0 @@ <!-- And use in your <template> or JSX -->

Improved metrics