🪝 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
• 📸 Playgrounds using Vite and Nuxt
• 🚚 Built using unbuild
• 📚 Documentation using Vitepress

Edit variables, implement, test, publish 🏎

Commands

Build the package:

pnpm build

Run the development environment (vite):

pnpm dev

Run the docs:

pnpm dev:docs

Build the docs:

pnpm build:docs

Lint the package:

pnpm lint

Run test suite:

pnpm test

Start Nuxt dev environment:

pnpm dev:nuxt

Build Nuxt environment:

pnpm build:nuxt

Preview Nuxt environment:

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.
• Rename all vue-composable-starter with your package name.
• Rename VueComposableStarterPluginOptions with your plugin options.
• Remove .vscode folder (containing recommended extensions)
• Edit README.md.
• Implement my composable.
• Test my composable.
• 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.