VueJs content loading placeholders

VueJs content loading placeholders

Jul 30, 2019 / Ramesh Mhetre

Vue Content Loading is a component to build or use placeholder/presets for your content.

Installation is really simple with just few steps & ready to make nice preset on your existing components.

<script>
import { VclFacebook, VclInstagram } from 'vue-content-loading';

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

<template>
    <vcl-facebook></vcl-facebook>
    <vcl-instagram></vcl-instagram>
  </template>

It is really easy to build your own custom presets, like:

<script>
    import VueContentLoading from 'vue-content-loading';

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

  <template>
    <vue-content-loading :width="300" :height="100">
      <circle cx="30" cy="30" r="30" />
      <rect x="75" y="13" rx="4" ry="4" width="100" height="15" />
      <rect x="75" y="37" rx="4" ry="4" width="50" height="10" />
    </vue-content-loading>
  </template>

Built in Presets

There are some built in presets with this package.

  • Facebook
  • Instagram
  • Code
  • List
  • Bullet List
  • Twitch
  • Table






Similar Articles

Compiling assets with Laravel Mix

Compiling assets with Laravel Mix

Laravel Mix provides a fluent API for defining Webpack build steps
Read more...
Javascript Markdown parser: Markdown-it

Javascript Markdown parser: Markdown-it

Markdown-it is a javascript library/package which converts markdown text to HTML. Its very fast, efficient & easy to use within your project.
Read more...
VuePress: Powerfull, static website generator with VueJs

VuePress: Powerfull, static website generator with VueJs

VuePress is a minimalistic Vue-powered static site generator from Evan You, the creator of Vue.js.
Read more...