Usage with Nuxt 3

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

Register the component

  1. Create a folder called plugins at the root of your project.
  2. Create a file named Vue3Marquee.client.ts inside the plugins directory.
  3. Add the following code to the file;
    import Vue3Marquee from 'vue3-marquee'
    
    export default defineNuxtPlugin((nuxtApp) => {
      nuxtApp.vueApp.use(Vue3Marquee, { name: 'Vue3Marquee' })
    })
    
    ✨ Well done! This should register a global component that you can call anywhere in your app under the <Vue3Marquee> tag. You can also change the name of the component by changing the name property in the plugin file.

Use the component

Now you can use the component anywhere in your app. Here is an example of how to use it in a page.

Using the <client-only> tag might be needed to prevent any hydration errors.
<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>