Usage with Vue 3

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'

import 'vue3-marquee/dist/style.css'

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'

import 'vue3-marquee/dist/style.css'

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>

<script setup lang="ts">
import 'vue3-marquee/dist/style.css'
</script>
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'

import 'vue3-marquee/dist/style.css'

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'

import 'vue3-marquee/dist/style.css'

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