Skip to content

Instantly share code, notes, and snippets.



Created Jun 21, 2021
What would you like to do?
Vue V3 component wrapping spin.js spinner
Example implementation of a Vue V3 component wrapper for the spin.js library
<div ref="spinDiv"></div>
<style lang="scss">
@import '~spin.js/spin.css';
<script lang="ts">
import { defineComponent, PropType, ref, unref } from 'vue';
import { Spinner, SpinnerOptions } from 'spin.js';
* Options that will be applied by default to all spinners.
* Can be overridden using the 'opts' component prop.
const defaultOptions: SpinnerOptions = {
color: '#112233',
export default defineComponent({
setup() {
return {
// This is necessary so that we can access the div to which the spinner is attached
spinDiv: ref<HTMLElement>(),
props: {
opts: {
// Spinner options (overrides defaults)
type: Object as PropType<SpinnerOptions>,
data: () => ({
spinner: null as Spinner | null,
mounted() {
const opts = Object.assign({}, defaultOptions, this.opts);
this.spinner = new Spinner(opts).spin(unref(this.spinDiv));
unmounted() {
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment