igaloly/vue-preloaders

Stable, Flexible and Fully Customizable Vue and Nuxt preloaders library

vue-preloaders's Issues

Typescript support? please :'c

I think your library is awesome! Can you guys add support for Typescript? Thanks!

Not Compatible with Gridsome

Hello @igaloly! 🙂

Thank you very much for your work and for this amazing plugin.

I was trying to use it for the first time with Gridsome but I have the following error when building gridsome build:

However, when I use gridsome develop it works perfectly. I think this is due to SSR support but I have not figured out a way to put it working. https://gridsome.org/docs/assets-scripts/#without-ssr-support

I have the following code on main.js:

import VuePreloaders from 'vue-preloaders'

export default function(Vue, { router, head, isClient }) {
  Vue.component('Layout', DefaultLayout)
  Vue.use(VuePreloaders)
}

And the following code on layouts/Default.vue:

mounted() {
    const close = this.$preloaders.open({
      component: Preloader,
      cssStyle: {
        position: 'fixed'
      },
      overlayStyle: {
        background:
          'radial-gradient(circle, rgba(74,74,74,1) 0%, rgba(61,61,61,1) 100%)',
        opacity: 1
      }
    })
    setTimeout(close, 2000)
  }

Thank you very much!

Your nuxt config correct?

nuxt 2.0 with express

Order of operations to successfully utilize this plugin with Nuxt 2.

Hello, I wanted to preface with how seemingly simple this implementation looks when reviewing the documentation but I just do not know what I am doing wrong here.

The flow of my application is more or less as such:

• Application running locally routes user to pages/index.vue
• This index.vue is using a Custom Layout called 'preloader'
• This Custom Layout is where I am creating the custom preloader component and using this.$preloaders.open()
• This will initiate a setTimeout function and then re-route the user to the endpoint '/intro'

It sounds easy but I just can't figure this out.

Installation / Registration Steps:

1. using NPM to install the dependency

npm install vue-preloaders --save

2. Created the plugins/ directory and added a new file: preloaders.js

nuxt.config.js

export default {
  plugins: ['~/plugins/preloaders.js']
}

3. Transpile the dependency inside of the build object's transpile array

nuxt.config.js

  build: {
    transpile: ['vue-preloaders'],
  },

4. Add the minified css into the css dependencies array

nuxt.config.js

  css: [
    'vue-preloaders/dist/vue-preloaders.css',
  ],

5. The preloaders.js plugin that I added to the nuxt.config.js

// NOTE: Here I am follow the Nuxt Plugins documentation:
import Vue from 'vue'
import VuePreloaders from 'vue-preloaders'

// NOTE: Here I am importing the custom preloader 
import Squares from '../layouts/preloader'

Vue.use(VuePreloaders, {
  loaders: {
    squareLoader: {
      container: '#app',
      component: Squares,
      overlayStyle: { backgroundColor: '#121212' },
    },
  },
})

I am trying to put this problem into words the best that I can. I think I am over-complicating this issue. Any help would be very much appreciated.

Kind regards,

Matthew