v-spotlight
Version:
Vue 3 spotlight overlay component for product tours, feature highlights, onboarding flows, and contextual walkthroughs. TypeScript ESM.
180 lines (132 loc) • 7.35 kB
Markdown
# V-Spotlight 💡
<!-- Badges -->
[](https://github.com/vinayakkulkarni/v-spotlight/actions/workflows/pipeline.yml)
[](https://github.com/geoql/doctor)
[](https://github.com/vinayakkulkarni/v-spotlight/releases)
[](https://www.npmjs.com/package/v-spotlight)
[](https://jsr.io/@vinayakkulkarni/v-spotlight)
[](http://npm-stat.com/charts.html?package=v-spotlight)
[](https://bundlephobia.com/package/v-spotlight@latest)
[](https://github.com/vinayakkulkarni/v-spotlight/blob/main/package.json)
[](./LICENSE)
[](https://github.com/voidzero-dev/vite-plus)
[](https://www.typescriptlang.org/)
[](https://pnpm.io/)
[](https://nodejs.org/)
<!-- End Badges -->
**[Live demo](https://v-spotlight.vinayakkulkarni.dev/?utm_source=github&utm_medium=readme&utm_campaign=v-spotlight)** · [npm](https://www.npmjs.com/package/v-spotlight) · [JSR](https://jsr.io/@vinayakkulkarni/v-spotlight)
- 🔦 Tiny reusable Spotlight component for your Vue App
## Table of Contents
- [V-Spotlight 💡](#v-spotlight-)
- [Table of Contents](#table-of-contents)
- [Demo](#demo)
- [Requirements](#requirements)
- [Installation](#installation)
- [Build Setup](#build-setup)
- [Usage](#usage)
- [Example](#example)
- [Contributing](#contributing)
- [Author](#author)
## Demo
Live demo: [v-spotlight.vinayakkulkarni.dev](https://v-spotlight.vinayakkulkarni.dev/?utm_source=github&utm_medium=readme&utm_campaign=v-spotlight)
[](https://stackblitz.com/edit/v-spotlight?file=src/App.vue)
## Requirements
- [vue](https://vuejs.org/) `^3.x`
### Installation
```sh
pnpm add v-spotlight
```
CDN: [UNPKG](https://unpkg.com/v-spotlight/dist/) | [jsDelivr](https://cdn.jsdelivr.net/npm/v-spotlight/dist/) (available as `window.VSpotlight`)
### Build Setup
```bash
# install dependencies
$ pnpm install
# package the library
$ pnpm run build
# run the demo locally
$ pnpm run demo:dev
# build and deploy the demo to Cloudflare Workers
$ pnpm run deploy
```
### Usage
Global component:
```js
// main.ts
import { VSpotlight } from 'v-spotlight';
import { createApp } from 'vue';
const app = createApp({});
app.component('VSpotlight', VSpotlight);
```
Or use locally
```js
// 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`
```js
import { VSpotlight } from 'v-spotlight';
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.component('VSpotlight', VSpotlight);
});
```
then import the file in `nuxt.config.{j|t}s`:
```js
export default {
// ...
plugins: [
// ...
{ src: '~/plugins/v-spotlight', mode: 'client' },
// ...
],
// ...
};
```
### Example
```html
<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/index.css';
</style>
```
## Contributing
1. Fork it ( [https://github.com/vinayakkulkarni/v-spotlight/fork](https://github.com/vinayakkulkarni/v-spotlight/fork) )
2. Create your feature branch (`git checkout -b feat/new-feature`)
3. Commit your changes (`git commit -Sam 'feat: add feature'`)
4. Push to the branch (`git push origin feat/new-feature`)
5. Create a new [Pull Request](https://github.com/vinayakkulkarni/v-spotlight/compare)
_Note_:
1. Please contribute using [GitHub Flow](https://web.archive.org/web/20191104103724/https://guides.github.com/introduction/flow/)
2. Commits & PRs will be allowed only if the commit messages & PR titles follow the [conventional commit standard](https://www.conventionalcommits.org/), _read more about it [here](https://github.com/conventional-changelog/commitlint/tree/master/%40commitlint/config-conventional#type-enum)_
3. PS. Ensure your commits are signed. _[Read why](https://withblue.ink/2020/05/17/how-and-why-to-sign-git-commits.html)_
## Author
**v-spotlight** © [Vinayak](https://vinayakkulkarni.dev/?utm_source=github&utm_medium=readme&utm_campaign=v-spotlight), Released under the [MIT](./LICENSE) License.<br>
Authored and maintained by Vinayak Kulkarni with help from contributors ([list](https://github.com/vinayakkulkarni/v-spotlight/contributors)).
> [vinayakkulkarni.dev](https://vinayakkulkarni.dev/?utm_source=github&utm_medium=readme&utm_campaign=v-spotlight) · GitHub [@vinayakkulkarni](https://github.com/vinayakkulkarni) · Twitter [@\_vinayak_k](https://twitter.com/_vinayak_k)
## More from the author
- [v-github-icon](https://v-github-icon.vinayakkulkarni.dev/?utm_source=github&utm_medium=readme&utm_campaign=v-spotlight) — GitHub corner component for Vue 3
- [v-pip](https://v-pip.vinayakkulkarni.dev/?utm_source=github&utm_medium=readme&utm_campaign=v-spotlight) — picture-in-picture for Vue 3
- [v-image](https://v-image.vinayakkulkarni.dev/?utm_source=github&utm_medium=readme&utm_campaign=v-spotlight) — Vue 3 image input with live preview
- [v-tweakpane](https://v-tweakpane.vinayakkulkarni.dev/?utm_source=github&utm_medium=readme&utm_campaign=v-spotlight) — Tweakpane panels for Vue 3
- [nxui](https://nxui.geoql.in/?utm_source=github&utm_medium=readme&utm_campaign=v-spotlight) — animated copy-paste UI components and Paper Shaders for Vue 3 and Nuxt
- [shadscan-vue](https://shadscan-vue.geoql.in/?utm_source=github&utm_medium=readme&utm_campaign=v-spotlight) — UI-fundamentals audits for shadcn-vue and shadcn-nuxt apps
See every project at [vinayakkulkarni.dev/projects](https://vinayakkulkarni.dev/projects?utm_source=github&utm_medium=readme&utm_campaign=v-spotlight) and [geoql.in](https://geoql.in/?utm_source=github&utm_medium=readme&utm_campaign=v-spotlight).