Usage with Vue 3

If you are upgrading from v3 to v4, please remove the dist/style.css import from your main.js or main.ts file. This css is now imported automatically by the plugin.

Register the component

The most common use case is to register the component globally.

// main.js
import { createApp } from 'vue'
import Vue3Marquee from 'vue3-marquee'

createApp(App).use(Vue3Marquee).mount('#app')
If you get an error with Typescript, try use(Vue3Marquee, { name: "Vue3Marquee" })
If you need to use a custom component name, you can pass it as an option to the plugin.
app.use(Vue3Marquee, { name: 'MarqueeComponent' }) // use in  your vue template as  <MarqueeComponent />
  • name string (default: 'Vue3Marquee') - set custom component name

Alternatively you can also import the component locally in your SFC.

import { Vue3Marquee } from 'vue3-marquee'

export default {
  components: {
    Vue3Marquee,
  },
}

Use the component

You can then use the component in your template as follows:

Script Setup
<template>
  <Vue3Marquee>
    <img height="200" width="300" src="...img" />
    <img height="200" width="300" src="...img" />
    <img height="200" width="300" src="...img" />
  </Vue3Marquee>
</template>
Composition API
<template>
  <Vue3Marquee>
    <img height="200" width="300" src="...img" />
    <img height="200" width="300" src="...img" />
    <img height="200" width="300" src="...img" />
  </Vue3Marquee>
</template>

<script>
import { defineComponent } from 'vue'
import { Vue3Marquee } from 'vue3-marquee'

export default defineComponent({
  components: {
    Vue3Marquee,
  },
  setup() {
    return {}
  },
})
</script>
Options API
<template>
  <Vue3Marquee>
    <img height="200" width="300" src="...img" />
    <img height="200" width="300" src="...img" />
    <img height="200" width="300" src="...img" />
  </Vue3Marquee>
</template>

<script>
import { Vue3Marquee } from 'vue3-marquee'

export default {
  components: {
    Vue3Marquee,
  },
}
</script>
Edit this page on GitHub
Table of Contents