michalsnik / vue-content-placeholders

Composable components for rendering fake (progressive) content like facebook in vue

vue-content-placeholders

Vue addon for rendering fake content while data is fetching to provide better UX and lower bounce rate.

---

💿 Installation

• via npm: npm install vue-content-placeholders --save
• via yarn: yarn add vue-content-placeholders

🚀 Usage

Include plugin in your main.js file.

import Vue from 'vue'
import VueContentPlaceholders from 'vue-content-placeholders'

Vue.use(VueContentPlaceholders)

⚠️ A css file is included when importing the package. You may have to setup your bundler to embed the css in your page.

Examples:

<content-placeholders>
  <content-placeholders-heading :img="true" />
  <content-placeholders-text :lines="3" />
</content-placeholders>

<content-placeholders :rounded="true">
  <content-placeholders-img />
  <content-placeholders-heading />
</content-placeholders>

Available components and properties

• root <content-placeholders>

  • Boolean animated (default: true)
  • Boolean rounded (default: false) - border radius
  • Boolean centered (default: false)

  these properties define how all children components will act

• <content-placeholders-heading />

  • Boolean img (default: false)

• <content-placeholders-text />

  • Number lines (default: 4)

• <content-placeholders-img />

---

🔓 License

See the LICENSE file for license rights and limitations (MIT).

vue-content-placeholders's Issues

Chrome animation overflow bug!

Hi

The placeholder animation overflows in the actual Chrome version.

content-placeholders component only renders the first sub-component

Maybe this is something I'm doing wrong (I'm not too flash at JS), but the content-placeholders component seems to be only displaying the first sub-component. I've popped together a teeny app showing this here : https://github.com/ok200paul/placeholder-issue.

What am I doing wrong? :)

Syntax error while using webpack with postcss

After adding this

import VueContentPlaceholders from 'vue-content-placeholders'
Vue.use(VueContentPlaceholders)

into my main.js of vue-cli webpack template with postcss, webpack shows me the following error:

app_1    | 20:28:59 webpack.1 | > Starting dev server...
app_1    | 20:29:25 webpack.1 |  ERROR  Failed to compile with 1 errors20:29:25
app_1    | 20:29:25 webpack.1 |
app_1    | 20:29:25 webpack.1 |  error  in ./~/vue-content-placeholders/dist/vue-content-placeholders.css
app_1    | 20:29:25 webpack.1 |
app_1    | 20:29:25 webpack.1 | Module build failed: Syntax Error
app_1    | 20:29:25 webpack.1 |
app_1    | 20:29:25 webpack.1 | (5:1) Unknown word
app_1    | 20:29:25 webpack.1 |
app_1    | 20:29:25 webpack.1 |   3 | // load the styles
app_1    | 20:29:25 webpack.1 |   4 | var content = require("!!../../css-loader/index.js??ref--8-1!./vue-content-placeholders.css");
app_1    | 20:29:25 webpack.1 | > 5 | if(typeof content === 'string') content = [[module.id, content, '']];
app_1    | 20:29:25 webpack.1 |     | ^
app_1    | 20:29:25 webpack.1 |   6 | if(content.locals) module.exports = content.locals;
app_1    | 20:29:25 webpack.1 |   7 | // add the styles to the DOM
app_1    | 20:29:25 webpack.1 |
app_1    | 20:29:25 webpack.1 |
app_1    | 20:29:25 webpack.1 |  @ ./~/vue-content-placeholders/index.js 3:0-44
app_1    | 20:29:25 webpack.1 |  @ ./src/main.js
app_1    | 20:29:25 webpack.1 |  @ multi ./build/dev-client ./src/main.js
app_1    | 20:29:25 webpack.1 |
app_1    | 20:29:25 webpack.1 | > Listening at http://localhost:8080

React placeholders

Are you thinking about forking to react?

Safari looks different

The component is great, but in safari it shows different, is it a bug?

Vue 3 support ?

I'm trying to use this component with vue 3.
Will you provide any support ?

I tried something like this:

import { createApp } from 'vue'
import VueContentPlaceholders from 'vue-content-placeholders'
...
createApp(App).use(router)
  .use(VueContentPlaceholders)
  .mount('#app')

But this is what I got in the console:

vue-content-placeholders.common.js?5f56:1 Uncaught (in promise) TypeError: Cannot read property '_c' of undefined
    at Proxy.render (vue-content-placeholders.common.js?5f56:1)
    ...

Thanks.

correct way to use in ssr

in ssr mode, the animation doesn't work. what is the correct way to import css files.
In nuxt, I am importing it as mentioned in the README.md

Change the color of the placeholder?

Is this possible to change the color of the placeholder? I would like to use it in the dark more with more dark color?

CSS paints the body red

Any reason for this? Trying to implement onto an existing project but it's converting the body to red..

页面渲染完成之后怎么隐藏 骨架屏

How to render data?

I used many ways but could not render my data after loading, hope to get help!

in dev mode getting: did you register the component correctly

Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

CSS Fails in Scoped SCSS

My app was using scoped scss which was failing to render CSS for the component.

<style lang="scss" scoped>
</style>

I had to create an unscoped one and copy SCSS codes into there to make it working.

<style lang="scss">
</style>