Integrate epic-spinner in nuxtjs project

[jeydi243]

Hi everyone!

Can someone help me to integrate it in nuxtjs! Thank you!

[tokidoki11]

I used nuxt with typescript, It is just simple as install and import

JS version should be the same

[axieum]

Doesn't appear to work -

<script lang="ts">
import Vue from 'vue';
import { AtomSpinner } from 'epic-spinners';

export default Vue.extend({
  components: {
    AtomSpinner,
  },
});
</script>

[stevenferrer]

You can do something like below.

<script>
let HollowDotsSpinner = null

if (process.client) {
  HollowDotsSpinner = require('epic-spinners').HollowDotsSpinner
}

export default Vue.extend({
  components: {
    HollowDotsSpinner,
  },
});
</script>

[mamaoag]

I manage to solve this issue by registering the desired spinner component globally. I am using Nuxt.js v2 for reference.

1. Create a plugin plugin/<filename>.js With the contents:

import Vue from 'vue'
import { <spinner> } from 'epic-spinners'

Vue.component(component_name, <spinner>) 

2. Import the plugin on the plugins option in nuxt.config.js

[yauri-io]

For Nuxt SSR, Just follow the usage example in the home page

  // To use minified css and js files instead of .vue single file components:
 import 'epic-spinners/dist/lib/epic-spinners.min.css'
 import {AtomSpinner} from 'epic-spinners/dist/lib/epic-spinners.min.js'

[vinosamari]

I seem to be experiencing the same issue even after using the plugins workaround by @mamaoag. Also, no changes with the <client-only tag.

[galaxyblur]

I'm on nuxt 2.* with nuxt-bridge and this works totally fine for me (static build though):

import { OrbitSpinner } from 'epic-spinners';

export default {
  components: {
    OrbitSpinner,
  },
};