- 🔦 Tiny reusable Spotlight component for your Vue App
- vue
^3.x
npm install --save v-spotlight
CDN: UNPKG | jsDelivr (available as window.VSpotlight
)
# install dependencies
$ npm install
# package the library
$ npm run build
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' },
// ...
],
// ...
};
<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>
- 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
v-spotlight © Vinayak, Released under the MIT License.
Authored and maintained by Vinayak Kulkarni with help from contributors (list).
vinayakkulkarni.dev · GitHub @vinayakkulkarni · Twitter @_vinayak_k