feat: update template

.github/workflows/ci.yml

@@ -0,0 +1,32 @@
+name: Run tests
+
+on:
+  push:
+  workflow_dispatch:
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - uses: pnpm/action-setup@v4
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: pnpm
+      - name: Setup Pages
+        uses: actions/configure-pages@v5
+      - name: Install dependencies
+        run: pnpm install
+      - name: Install playwright browsers
+        run: npx playwright install --with-deps
+      - name: Run tests
+        run: pnpm vitest run
+      - name: Run type checks
+        run: pnpm vue-tsc --noEmit
+      - name: Run linting
+        run: pnpm lint

.github/workflows/docs.yml

@@ -0,0 +1,56 @@
+name: Deploy VitePress site to Pages
+
+on:
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: pages
+  cancel-in-progress: false
+
+jobs:
+  # Build job
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - uses: pnpm/action-setup@v4
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: pnpm
+      - name: Setup Pages
+        uses: actions/configure-pages@v5
+      - name: Install dependencies
+        run: pnpm install
+      - name: Build with VitePress
+        run: pnpm docs:build
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: docs/.vitepress/dist
+
+  # Deployment job
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    needs: build
+    runs-on: ubuntu-latest
+    name: Deploy
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

.gitignore

@@ -8,6 +8,7 @@ node_modules
 .temp
 .tmp
 .cache
+**/.vitepress/cache
 
 # Yarn
 **/.yarn/cache

.npmrc

@@ -1 +1,2 @@
-shamefully-hoist=true
+shamefully-hoist=true
+ignore-workspace-root-check=true

README.md

@@ -7,8 +7,9 @@ A minimalist starting point for your next Vue 3 composable.
 - 🤹 Testing using [**Vitest**](https://vitest.dev)
 - ☑️ Linting using [**@antfu/eslint-config**](https://github.com/antfu/eslint-config)
 - 🌐 [**Nuxt 3**](https://nuxtjs.org) as a playground
-- 📸 Demo ready to be written and deployed using [**Vite**](https://vitejs.dev)
+- 📸 Playgrounds using [**Vite**](https://vitejs.dev) and [Nuxt](https://nuxt.com/)
 - 🚚 Built using [**unbuild**](https://github.com/unjs/unbuild)
+- 📚 Documentation using [**Vitepress**](https://vitepress.dev)
 
 > Edit [variables](#to-do), implement, test, publish 🏎
 
@@ -20,28 +21,28 @@ Build the package:
 pnpm build
 ```
 
-Build with watcher:
+Run the development environment (vite):
 
 ```bash
 pnpm dev
 ```
 
-Run the demo:
+Run the docs:
 
 ```bash
-pnpm dev:demo
+pnpm dev:docs
 ```
 
-Build the demo:
+Build the docs:
 
 ```bash
-pnpm build:demo
+pnpm build:docs
 ```
 
 Lint the package:
 
 ```bash
-pnpm link
+pnpm lint
 ```
 
 Run test suite:
@@ -50,25 +51,19 @@ Run test suite:
 pnpm test
 ```
 
-Test typings:
-
-```bash
-pnpm test:types
-```
-
-Start Nuxt 3 env:
+Start Nuxt dev environment:
 
 ```bash
 pnpm dev:nuxt
 ```
 
-Build Nuxt 3 env:
+Build Nuxt environment:
 
 ```bash
 pnpm build:nuxt
 ```
 
-Preview Nuxt 3 env:
+Preview Nuxt environment:
 
 ```bash
 pnpm start:nuxt
@@ -97,11 +92,12 @@ 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.
-- [ ] Make a demo of my composable in the `demo` folder.
 - [ ] Document my composable.
 - [ ] Publish on [NPM](npmjs.com), [awesome-vue](https://github.com/vuejs/awesome-vue), [vue-forum](https://forum.vuejs.org/), [Vue Discord](https://fr.vuejs.org/v2/guide/join.html).
 

build.config.ts

@@ -1,51 +1,45 @@
-import { copySync } from 'fs-extra'
-import consola from 'consola'
 import { defineBuildConfig } from 'unbuild'
 
 export default defineBuildConfig({
-  declaration: true,
   rollup: {
-    emitCJS: true
+    emitCJS: true,
   },
-  externals: ['@nuxt/schema', '@nuxt/schema-edge', '@nuxt/kit', '@nuxt/kit-edge', 'nuxt', 'nuxt-edge', 'nuxt3', 'vue'],
+  declaration: true,
+  // warnings triggered by nuxt exports not being built - happens in separate script
+  failOnWarn: false,
+  // TODO: check if all are needed
+  externals: [
+    '@nuxt/kit',
+    '@nuxt/schema',
+    'nuxt3',
+    'nuxt',
+    'vue',
+    'defu',
+    '@vueuse/motion',
+    'csstype',
+    '@vueuse/shared',
+    'framesync',
+    'style-value-types',
+    '@vue/compiler-core',
+    '@babel/parser',
+    '@vue/shared',
+    '@vueuse/core',
+  ],
   entries: [
     // Plugin
     {
       input: 'src/index.ts',
       outDir: 'dist',
       name: 'index',
       format: 'esm',
-      ext: 'mjs'
+      ext: 'mjs',
     },
     {
       input: 'src/index.ts',
       outDir: 'dist',
       name: 'index',
       format: 'cjs',
-      ext: 'cjs'
+      ext: 'cjs',
     },
-    // Nuxt
-    {
-      input: 'src/nuxt/module.ts',
-      outDir: 'dist',
-      name: 'nuxt',
-      format: 'esm',
-      ext: 'mjs'
-    },
-    {
-      input: 'src/nuxt/module.ts',
-      outDir: 'dist',
-      name: 'nuxt',
-      format: 'cjs',
-      ext: 'cjs'
-    }
   ],
-  hooks: {
-    'build:done': () => {
-      copySync('src/nuxt/runtime', 'dist/runtime')
-
-      // eslint-disable-next-line no-console
-      consola.info('Nuxt runtime copied to `dist/`!')
-    }
-  }
 })

docs/.vitepress/config.ts

@@ -0,0 +1,38 @@
+import { resolve } from 'node:path'
+import { defineConfig } from 'vitepress'
+
+// https://vitepress.dev/reference/site-config
+export default defineConfig({
+  title: 'vue-composable-starter',
+  description: 'A Vue Composable',
+  vite: {
+    resolve: {
+      alias: [
+        {
+          find: 'vue-composable-starter',
+          replacement: resolve(__dirname, '../../src/index.ts'),
+        },
+      ],
+    },
+  },
+  themeConfig: {
+    // https://vitepress.dev/reference/default-theme-config
+    nav: [
+      { text: 'Home', link: '/' },
+      { text: 'Examples', link: '/api-examples' },
+    ],
+
+    sidebar: [
+      {
+        text: 'Examples',
+        items: [
+          { text: 'Runtime API Examples', link: '/api-examples' },
+        ],
+      },
+    ],
+
+    socialLinks: [
+      { icon: 'github', link: 'https://github.com/vuejs/vitepress' },
+    ],
+  },
+})

docs/api-examples.md

@@ -0,0 +1,15 @@
+---
+outline: deep
+---
+
+# EXAMPLE
+
+<<< @/example.vue
+
+## Results
+
+<script setup>
+import Example from './example.vue'
+</script>
+
+<Example />

docs/example.vue

@@ -0,0 +1,11 @@
+<script setup>
+import { useToggle } from 'vue-composable-starter'
+
+const [toggleable, toggle] = useToggle()
+</script>
+
+<template>
+  <button :style="{ background: toggleable ? 'green' : 'red' }" @click="toggle">
+    Toggle: {{ toggleable }}
+  </button>
+</template>