Vue Composable Starter

screenshot of Vue Composable Starter
vue

Vue Composable Starter

🪝 Minimalist starting point for your next Vue Composable

Overview

The vue-composable-starter is a minimalist starting point for building Vue 3 composable. It includes TypeScript by default, uses PNPM as package manager, and provides testing using Vitest. The starter also includes linting using @antfu/eslint-config and Nuxt 3 as a playground. It is built using unbuild and provides commands for building, running, testing, and previewing the package.

Features

  • TypeScript by default: The starter comes with TypeScript set up, making it easier to develop Vue composable with type checking.
  • PNPM as package manager: It uses PNPM as the package manager, allowing for faster and more efficient dependency installation.
  • Testing using Vitest: The starter includes a testing setup using Vitest, enabling developers to write and run tests for their composable.
  • Linting using @antfu/eslint-config: It includes a linting configuration using @antfu/eslint-config, ensuring code quality and consistency.
  • Nuxt 3 as a playground: Nuxt 3 is provided as a playground environment, allowing developers to explore and test the SSR capabilities of their composable.
  • Demo ready to be written and deployed using Vite: The starter includes a ready-to-use demo setup, which can be easily written and deployed using Vite.
  • Built using unbuild: The starter is built using unbuild, providing a simple and efficient build process for the package.

Installation

To install the vue-composable-starter, follow these steps:

  1. Edit the package.json file and modify the name, description, repository, and author keys according to your project.
  2. Remove the .vscode folder, which contains recommended extensions.
  3. Edit the README.md file and provide information about your project.
  4. Implement your composable by editing the necessary files.
  5. Test your composable using the provided test suite.
  6. Create a demo of your composable in the demo folder.
  7. Document your composable by providing necessary documentation.
  8. Publish your package on NPM, awesome-vue, vue-forum, and Vue Discord.

Summary

The vue-composable-starter is a useful starting point for developing Vue composable or general Vue packages. It provides a minimalist setup with key features such as TypeScript, PNPM, testing, linting, and a playground environment with Nuxt 3. The starter includes a demo setup and commands for building, running, testing, and previewing the package. Developers can easily customize the starter for their projects and contribute to its improvement through pull requests.

vue
Vue

Vue.js is a lightweight and flexible JavaScript framework that allows developers to easily build dynamic and reactive user interfaces. Its intuitive syntax, modular architecture, and focus on performance make it a popular choice for modern web development.

eslint
Eslint

ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.

typescript
Typescript

TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.