Need an example for using vue-content-loader on simple html using cdn. No npm, no webpack, no yarn.

Hi,

I ask that painful question because pull requests are still pending, bugs from a few months have no reply...

Maybe you need some help maintaining this project or you don't use it anymore ?

BTW I don't see any active alternative in the Vue.js world so this project still seems to be the best choice 👍

Thanks for your efforts in creating this package, I hope you will reply to this ticket ;-)

i have problem with Vue 3, like this : Uncaught (in promise) TypeError: Cannot read property 'uniqueKey' of undefined

before, i used on Vue 2 and work fine

any solution ?

Getting these warnings on a project with Vue 2

 warning  in ./node_modules/vue-content-loader/dist/vue-content-loader.es.js

"export 'createVNode' was not found in 'vue'

 warning  in ./node_modules/vue-content-loader/dist/vue-content-loader.es.js

"export 'defineComponent' was not found in 'vue'

 warning  in ./node_modules/vue-content-loader/dist/vue-content-loader.es.js

"export 'mergeProps' was not found in 'vue'

They are just warnings not errors but still would be nice to not have them

When I want to dynamically change the value of the viewbox,

I find that the computedviewbox in the component contentloader maintains the original value,

resulting in failure to respond to the latest value

Hello,

thank you for the awesome work. I'm experiencing an issue using vue-content-loader with nuxt.
At the beginning server render the content, and then in mount it disappear.

If I trigger HMR component appear again.

Any ideas?

Thank you.

See: danilowoz/react-content-loader#316

like this
https://biigpongsatorn.github.io/#/vue-element-loading

Hi,

Are you aware of any examples/demos for using vue-content-loader in a nuxt js project?

Best regards!

How to make loader not-responsive, and not follow to be big, when container get bigger

I see sideEffects: false in pkg settings。Can you tell me why ？

Hey. Thanks for the awesome project.

Vue content loader online tool isn't working anymore.

http://danilowoz.com/create-content-loader/
There is no vue creater (it was there few days back)

Hello,

I can't get this library to render custom paths with Vue 2.5. the clipPath is "undefined" in the HTML too, so I am not sure whats wrong.

Example used:

<content-loader
		:height="160"
		:width="400"
		:speed="2"
		primaryColor="#f3f3f3"
		secondaryColor="#ecebeb">
  <rect x="18.56" y="16.61" rx="0" ry="0" width="350.03" height="41" /> 
  <rect x="18.73" y="78.61" rx="0" ry="0" width="109.2" height="46" />
</content-loader>

if I inspect that, the clipPath is

<clipPath id="68y2z5o1l1d">undefined</clipPath>

Can you help?

Not sure whether @alidcastano 's vue-content-loader is in use or not.

Otherwise I'll move this package to @egoist/vue-content-loader when I get the npm handle (egoist).

I try to use cdn ,but I found that it can't working at custom.
(rect just show first one , and primaryColor 、secondaryColor also not working)

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-content-loader.min.js"></script>

code:

<div id="app">
<template>
              <content-loader  primaryColor="#fff" secondaryColor="#000">
                <rect x="70" y="15" rx="4" ry="4" width="117" height="6.4" />
                <rect x="70" y="35" rx="3" ry="3" width="85" height="6.4" />
                <rect x="0" y="80" rx="3" ry="3" width="350" height="6.4" />
                <rect x="0" y="100" rx="3" ry="3" width="380" height="6.4" />
                <rect x="0" y="120" rx="3" ry="3" width="201" height="6.4" />
                <circle cx="30" cy="30" r="30" />
              </content-loader>
            </template>
</div>
<script>
  new Vue({
    el: '#app',
    data () {
      return {
        list: [],
        tags:[]
      }
    },
    components: { 
        'content-loader': window.contentLoaders.ContentLoader
      }
  })
</script>

but the result ：
(rect just show first one , and primaryColor 、secondaryColor also not working)

I got a message in console after adding it in Vue 2.0

[Vue warn]: Invalid prop: type check failed for prop "height". Expected Number, got String.

This issue provides visibility into Renovate updates and their statuses. Learn more

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): update jest monorepo to v28 (major) (babel-jest, jest)

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

before introducing content-loader I just had a loading spinner that would appear immediately upon arriving on a certain page

after replacing the loading spinner with content-loader, there is a lag for the content-loader to appear. are there known causes to this?

this problem appears only in production, but not when I am running my development server.

My content's width depend on the screen size, is it possible to create content loaders with a dynamic width for responsiveness purposes ?

The width and height properties seems to accept only numbers.

Hello, thank you for this beauty.
The content loader works exactly as expected across different devices on production but displays a black rectangular box on my iphone 6 instead, does anyone have such experience please?

Only render the component after mounted (so it only renders on client-side) will make it easier for SSR, my question is: do we need to render the component on server-side at all?

Percentages (%) is support for rect and svg. Would be cool if u was able to use both string and number for width.

Hi, I cant run loader with this configuration with custom loaders in slot.

"@vue/compat": "^3.1.5",
"@vue/compiler-sfc": "^3.1.5",
"@vue/composition-api": "^1.4.7",
"vue-content-loader": "^2.0.1",
"vue": "^3.1.5",

<content-loader v-if="visible" :speed="speed" :width="width" :height="height" primaryColor="#ced4da">
    <rect rx="3" ry="3" height="199" width="123" y="0" x="0"></rect>
</content-loader>

This fails with error: Uncaught TypeError: this.$slots.default is not a function

The height of the rendered component is higher than the height set with :height="200"

It must be fun making a Vue version of http://danilowoz.com/create-react-content-loader/

<ContentLoader :height="960" :width="700" >
This is the code causing the problem.
But i fix it by
<ContentLoader :height="960" :width="701" >
Then,it looks like normal.
why?I think it is a bug.

https://codesandbox.io

Some designs require square corners for loaders, but currently there is no way to do that with this component. Currently, ry and rx values in svg are hard-coded.

Could we have control over this value (either by two params or by one, controlling both values)?

TypeScript support?

Online tool is not editable anymore,
It redirects me to: https://danilowoz.com/create-content-loader/ and I can only see and copy