Vue.js 3 Tutorial to Build Scrolling Text & Image Marquee Animation Using vue3-marquee in TS

main.ts`

import { createApp } from 'vue';
import App from './App.vue';
import Vue3Marquee from 'vue3-marquee'

const app = createApp(App)

// Registering the component globally
app.use(Vue3Marquee)

// Mount the Vue app
app.mount('#app');

import { createApp } from 'vue';

import App from './App.vue';

import Vue3Marquee from 'vue3-marquee'

const app = createApp(App)

// Registering the component globally

app.use(Vue3Marquee)

// Mount the Vue app

app.mount('#app');

App.vue

<template>
  <Vue3Marquee>
    <img height="200" width="300" v-bind:src="image1" />
    <img height="200" width="300" v-bind:src="image2" />
    <img height="200" width="300" v-bind:src="image3" />
  </Vue3Marquee>
</template>

<script>
import { Vue3Marquee } from 'vue3-marquee'
// Import images directly
import image1 from './assets/1.jpeg'
import image2 from './assets/2.jpeg'
import image3 from './assets/3.jpeg'
export default {
  components: {
    Vue3Marquee,
  },
  data() {
    return {
      image1,
      image2,
      image3,
    }
  }
}
</script>

</Vue3Marquee>

</template>

import { Vue3Marquee } from 'vue3-marquee'

// Import images directly

import image1 from './assets/1.jpeg'

import image2 from './assets/2.jpeg'

import image3 from './assets/3.jpeg'

export default {

components: {

Vue3Marquee,

data() {

return {

image1,

image2,

image3,

}

</script>

Vue.js 3 Tutorial to Build Scrolling Text & Image Marquee Animation Using vue3-marquee in TS

Comments

Leave a Reply Cancel reply

Archives