Vue Breaking News Ticker

Demo

Setup

yarn add v-breaking-news-ticker  # or npm i v-breaking-news-ticker

Vue3

Global Register

import { createApp } from 'vue'
import App from './App.vue'
import { BreakingNewsTicker } from 'v-breaking-news-ticker'
import 'v-breaking-news-ticker/dist/vue3/breaking-news-ticker.min.css'

const app = createApp(App)

app.use(BreakingNewsTicker);
app.mount('#app')

Local Register

<script setup>
import { BreakingNewsTicker } from 'v-breaking-news-ticker'
import 'v-breaking-news-ticker/dist/vue3/breaking-news-ticker.min.css'
</script>

Via CDN

<script src="https://unpkg.com/vue@3"></script>
<script src="https://unpkg.com/v-breaking-news-ticker"></script>
<link 
 rel="stylesheet" 
 href="https://unpkg.com/v-breaking-news-ticker/dist/vue3/breaking-news-ticker.min.css"
>

<script>
  const app = Vue.createApp({})
    
  app.use(BreakingNewsTicker)
  app.mount('#app')
</script>

Vue2

Global Register

import Vue from "vue";
import { BreakingNewsTicker } from "v-breaking-news-ticker";
import 'v-breaking-news-ticker/dist/vue2/breaking-news-ticker.min.css'

Vue.use(BreakingNewsTicker);

Local Register

import { BreakingNewsTicker } from "v-breaking-news-ticker";
import 'v-breaking-news-ticker/dist/vue2/breaking-news-ticker.min.css'

export default {
  components: {
    BreakingNewsTicker,
  }
}

Via CDN

<script src="https://unpkg.com/vue@2"></script>
<script src="https://unpkg.com/v-breaking-news-ticker"></script>
<link 
 rel="stylesheet" 
 href="https://unpkg.com/v-breaking-news-ticker/dist/vue2/breaking-news-ticker.min.css"
>

<script>
new  Vue({
  el: "#app"
});

Vue.use(BreakingNewsTicker);
</script>

Usage

Usage

<breaking-news-ticker :news="breakingNews.news" :config="breakingNews.config">
</breaking-news-ticker>

<script setup>
  const breakingNews = {
  news: [
    {
      id: 0,
      title: 'Breaking News Title - 1'
    },
    {
      id: 1,
      title: 'Breaking News Title - 2'
    },
    {
      id: 2,
      title: 'Breaking News Title - 3'
    },
  ],
  config: {
    rtl: false,
    borderColor: '#EF7B7B',
    label: {
      title: 'Breaking News',
      bgColor: '#EF7B7B',
      color: '#fff'
    },
    news: {
      animation: {
        effect: 'slide-down' //slide-down - slide-up - slide-right - scroll
      }
    },
    navigation: {
      autoPlay: true,
      duration: 5000,
      bgColor: '#f6f6f6' 
    }
  }
}
</script>

Note that all props are compulsory.

| Name | Type | Default | Description | | ---------------- | ------------- | ------------------ | ------------------------------------------------------------ | | news | Array | [] | For the news you want to show |