V-spotlight NPM

V-Spotlight 💡

🔦 Tiny reusable Spotlight component for your Vue App

V-Spotlight 💡

Demo

Requirements

vue ^3.x

Installation

npm install --save v-spotlight

CDN: UNPKG | jsDelivr (available as window.VSpotlight)

Build Setup

# install dependencies
$ npm install

# package the library
$ npm run build

Usage

Global component:

// main.ts
import { VSpotlight } from 'v-spotlight';
import { createApp } from 'vue';

const app = createApp({});
app.component('VSpotlight', VSpotlight);

Or use locally

// component.vue
<script lang="ts">
import { defineComponent } from 'vue';
import { VSpotlight } from 'v-spotlight';

export default defineComponent({
  components: {
    VSpotlight,
  },
});
</script>

For Nuxt 3, create a file in plugins/v-spotlight.ts

import { VSpotlight } from 'v-spotlight';

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.component('VSpotlight', VSpotlight);
});

then import the file in nuxt.config.{j|t}s:

export default {
  // ...
  plugins: [
    // ...
    { src: '~/plugins/v-spotlight', mode: 'client' },
    // ...
  ],
  // ...
};

Example

<template>
  <v-spotlight />
</template>

<script lang="ts">
  import { defineComponent, ref } from 'vue';
  import type { Ref } from 'vue';
  import { VSpotlight } from 'v-spotlight';

  export default defineComponent({
    components: {
      VSpotlight,
    },
  });
</script>
<style>
  @import 'v-spotlight/dist/v-spotlight.css';
</style>

Contributing

Fork it ( https://github.com/vinayakkulkarni/v-spotlight/fork )
Create your feature branch (git checkout -b feat/new-feature)
Commit your changes (git commit -Sam 'feat: add feature')
Push to the branch (git push origin feat/new-feature)
Create a new Pull Request

Note:

Please contribute using GitHub Flow
Commits & PRs will be allowed only if the commit messages & PR titles follow the conventional commit standard, read more about it here
PS. Ensure your commits are signed. Read why