🪝 vue-composable-starter

A minimalist starting point for your next Vue 3 composable.

• 🧩 TypeScript by default
• 📦 PNPM as package manager
• 🤹 Testing using Vitest
• ☑️ Linting using @antfu/eslint-config
• 🌐 Nuxt 3 as a playground
• 📸 Demo ready to be written and deployed using Vite
• 🚚 Built using unbuild

Edit variables, implement, test, publish 🏎

Commands

Build the package:

pnpm build

Build with watcher:

pnpm dev

Run the demo:

pnpm dev:demo

Build the demo:

pnpm build:demo

Lint the package:

pnpm link

Run test suite:

pnpm test

Test typings:

pnpm test:types

Start Nuxt 3 env:

pnpm dev:nuxt

Build Nuxt 3 env:

pnpm build:nuxt

Preview Nuxt 3 env:

pnpm start:nuxt

Why

This repository is useful if you want to start a new Vue composable, or a general Vue package.

I used it personally for:

• @vueuse/motion
• @vueuse/gesture
• @vueuse/sound

I try to keep it updated when I upgrade my own workflow!

Workflow

I usually develop with the dev:nuxt command.

Your changes on any file will be reloaded by Nuxt, and you can start trying SSR capabilities of your composable easily!

The general Nuxt environment does not differ from a classic Vue app.

To-Do

• Edit package.json name, description, repository and author keys.
• Remove .vscode folder (containing recommended extensions)
• Edit README.md.
• Implement my composable.
• Test my composable.
• Make a demo of my composable in the demo folder.
• Document my composable.
• Publish on NPM, awesome-vue, vue-forum, Vue Discord.

Contributing

You are more than welcome to improve this starter template.

Just submit your changes via pull request and I will review them before merging.

If you are making a fix on the template, you can use the main branch and send a pull request.

If you are adding a new features, please create a new branch with a name describing your feature (my-new-feature), push to your branch and then submit a pull request.