From 66e57527d9d4219aac1aed2ba3213edb7ca0f419 Mon Sep 17 00:00:00 2001 From: Romain Hamel Date: Fri, 21 Mar 2025 07:50:51 +0100 Subject: [PATCH 01/18] docs: update readme --- README.md | 133 ++++-------------------------------------------------- 1 file changed, 8 insertions(+), 125 deletions(-) diff --git a/README.md b/README.md index 17b958a7..c2670d7c 100644 --- a/README.md +++ b/README.md @@ -7,7 +7,7 @@ [![License][license-src]][license-href] [![Nuxt][nuxt-src]][nuxt-href] -A plug and play component playground for Nuxt. +A plug and play component playground for Vue and Nuxt. @@ -22,132 +22,17 @@ A plug and play component playground for Nuxt. ## Features -- **Easy Setup and Use:** Easily integrates into your Nuxt app with minimal configuration. Customize only when needed by creating examples or defining default props. -- **HMR Support:** Enables real-time updates with HMR for faster development. -- **Default UI Collections:** Comes with pre-configured collections for your UI libraries. - -## Quick Setup - -Install the module to your Nuxt application with one command: - -```bash -npx nuxi module add compodium -``` - -That's it! You can now access Compodium from the nuxt devtools or `/__compodium__/devtools`. - -## Configuration - -Configure Compodium in your Nuxt project by customizing the settings in your `nuxt.config.ts` file. Below is the default configuration, which you can modify to suit your needs: - -```ts -export default defineNuxtConfig({ - compodium: { - /* Customize compodium's base directory */ - dir: 'compodium/', - - /* List of glob patterns to exclude components */ - exclude: [], - - /* Whether to include default collections for third-party libraries. */ - includeLibraryCollections: true, - - extras: { - ui: { - /* If true, Compodium's UI will match your Nuxt UI color theme */ - matchColors: true - } - } - } -}) -``` - -### Preview Component - -Compodium renders your components in an isolated preview component that is mounted into your Nuxt application. You can customize this preview component by creating your own in `compodium/preview.vue`. - -Here's the default preview component you can start from: - -```vue - - - -``` - -> [!NOTE] -> Compodium renders outside of your `app.vue` component. This is useful if you need to inject CSS or provide parent components. - -### Component Examples - -You can provide examples for your components in the `compodium/examples/` folder. Examples will be matched to components based on the filename. Each example must be named after its corresponding component, followed by the `Example` keyword and an optional label. - -```bash -compodium -└── examples - ├── BaseInputExampleDisabled.vue # Will be added to the BaseInput component. - ├── BaseButtonExample.vue # Will be the main example for the BaseButton component. - └── BaseButtonExampleWithLabel.vue # Will be added to the BaseButton component. -``` - -### Default Props - -You can use the `extendCompodiumMeta` in your component or in examples to pass default values for required properties: -```ts -const props = defineProps<{ label: string }>() - -extendCompodiumMeta({ - defaultProps: { - label: 'Click me!' - } -}) -``` -> [!WARNING] -> `extendCompodiumMeta` is a macro that is evaluated at compile time. As such, you can only use literal values, and can't reference variables. - -Alternatively, you can specify default properties for your components in your `app.config.ts` file: - -```ts -export default defineAppConfig({ - compodium: { - components: { - baseButton: { - label: 'Click me!' - } - } - } -}) -``` +- Effortless Setup: Simple setup process and minimal maintenance, allowing you to focus on building components. +- **No Stories Required**: Analyzes your component code directly, eliminating the need to write stories. +- **Fast**: Built on top of Vite for rapid development and instant feedback, enhancing productivity. +- **DevTools Integration**: Integrates with Vue and Nuxt devtools for a cohesive development experience. +- **Code generation**: Generates up-to-date template code based on component props, ready to copy and use instantly. +- **UI Library Integrations**: Integrates with popular UI libraries, showcasing examples for locally installed components. ## Contribution Contributions are welcome! ♥️ -Currently, one way you can contribute is by adding examples for your favorite component library. You can find the Nuxt UI collection and examples [here](https://github.com/romhml/compodium/tree/main/src/runtime/libs). +Currently, one way you can contribute is by adding examples for your favorite component library. You can find the Nuxt UI collection and examples [here](https://github.com/romhml/compodium/tree/main/packages/examples/src/index.ts). **Local development** @@ -169,10 +54,8 @@ pnpm typechecks # Run Vitest pnpm test -pnpm test:watch ``` - [npm-version-src]: https://img.shields.io/npm/v/compodium/latest.svg?style=flat&colorA=020420&colorB=00DC82 [npm-version-href]: https://npmjs.com/package/compodium From 4d79afb55c59eeee45482af4ef77623c89b3c1a4 Mon Sep 17 00:00:00 2001 From: Romain Hamel Date: Fri, 21 Mar 2025 07:51:37 +0100 Subject: [PATCH 02/18] docs: update readme --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index c2670d7c..98befc0f 100644 --- a/README.md +++ b/README.md @@ -22,7 +22,7 @@ A plug and play component playground for Vue and Nuxt. ## Features -- Effortless Setup: Simple setup process and minimal maintenance, allowing you to focus on building components. +- **Effortless Setup**: Simple setup process and minimal maintenance, allowing you to focus on building components. - **No Stories Required**: Analyzes your component code directly, eliminating the need to write stories. - **Fast**: Built on top of Vite for rapid development and instant feedback, enhancing productivity. - **DevTools Integration**: Integrates with Vue and Nuxt devtools for a cohesive development experience. From 40a96e70a1d32f6e22255a8d956055b9fd170bea Mon Sep 17 00:00:00 2001 From: Romain Hamel Date: Fri, 21 Mar 2025 07:57:42 +0100 Subject: [PATCH 03/18] docs: update readme --- README.md | 65 +++++++++++++++++++ .../1.getting-started/2.installation.md | 2 + 2 files changed, 67 insertions(+) diff --git a/README.md b/README.md index 98befc0f..b1af3002 100644 --- a/README.md +++ b/README.md @@ -29,6 +29,71 @@ A plug and play component playground for Vue and Nuxt. - **Code generation**: Generates up-to-date template code based on component props, ready to copy and use instantly. - **UI Library Integrations**: Integrates with popular UI libraries, showcasing examples for locally installed components. +## Installation + +### Nuxt + +1. Install `@compodium/nuxt` + +```bash [pnpm] +pnpm add @compodium/nuxt +``` + +```bash [yarn] +yarn add @compodium/nuxt +``` + +```bash [npm] +npm install @compodium/nuxt +``` + +```bash [bun] +bun add @compodium/nuxt +``` + +2. Add the compodium module in your `nuxt.config.ts`: + +```ts [nuxt.config.ts] +export default defineNuxtConfig({ + modules: ['@compodium/nuxt'] +}) +``` + +### Vue + +1. Install `@compodium/vue` + +```bash [pnpm] +pnpm add @compodium/vue +``` + +```bash [yarn] +yarn add @compodium/vue +``` + +```bash [npm] +npm install @compodium/vue +``` + +```bash [bun] +bun add @compodium/vue +``` +Add the Nuxt UI Vite plugin in your `vite.config.ts`: + +```ts [vite.config.ts] +import { defineConfig } from 'vite' +import vue from '@vitejs/plugin-vue' +import vueDevTools from 'vite-plugin-vue-devtools' +import { compodium } from '@compodium/vue' + +export default defineConfig({ + plugins: [ + vue(), + vueDevTools(), + compodium() + ] +}) +``` ## Contribution Contributions are welcome! ♥️ diff --git a/docs/content/1.getting-started/2.installation.md b/docs/content/1.getting-started/2.installation.md index f66638f2..94f48e4f 100644 --- a/docs/content/1.getting-started/2.installation.md +++ b/docs/content/1.getting-started/2.installation.md @@ -66,11 +66,13 @@ bun add -D @compodium/vue ```ts [vite.config.ts] import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' +import vueDevTools from 'vite-plugin-vue-devtools' import compodium from '@compodium/vue' export default defineConfig({ plugins: [ vue(), + vueDevTools(), compodium() ] }) From 5f21acde6e7a8c4b737dc4340b0c1df84a7a9ee5 Mon Sep 17 00:00:00 2001 From: Romain Hamel Date: Fri, 21 Mar 2025 07:59:18 +0100 Subject: [PATCH 04/18] docs: update readme --- README.md | 32 +++---------------- .../1.getting-started/2.installation.md | 4 +-- 2 files changed, 7 insertions(+), 29 deletions(-) diff --git a/README.md b/README.md index b1af3002..baeec5ca 100644 --- a/README.md +++ b/README.md @@ -33,30 +33,8 @@ A plug and play component playground for Vue and Nuxt. ### Nuxt -1. Install `@compodium/nuxt` - ```bash [pnpm] -pnpm add @compodium/nuxt -``` - -```bash [yarn] -yarn add @compodium/nuxt -``` - -```bash [npm] -npm install @compodium/nuxt -``` - -```bash [bun] -bun add @compodium/nuxt -``` - -2. Add the compodium module in your `nuxt.config.ts`: - -```ts [nuxt.config.ts] -export default defineNuxtConfig({ - modules: ['@compodium/nuxt'] -}) +nuxi module add -D @compodium/nuxt ``` ### Vue @@ -64,19 +42,19 @@ export default defineNuxtConfig({ 1. Install `@compodium/vue` ```bash [pnpm] -pnpm add @compodium/vue +pnpm add -D @compodium/vue ``` ```bash [yarn] -yarn add @compodium/vue +yarn add -D @compodium/vue ``` ```bash [npm] -npm install @compodium/vue +npm install -D @compodium/vue ``` ```bash [bun] -bun add @compodium/vue +bun add -D @compodium/vue ``` Add the Nuxt UI Vite plugin in your `vite.config.ts`: diff --git a/docs/content/1.getting-started/2.installation.md b/docs/content/1.getting-started/2.installation.md index 94f48e4f..393d17fe 100644 --- a/docs/content/1.getting-started/2.installation.md +++ b/docs/content/1.getting-started/2.installation.md @@ -17,7 +17,7 @@ navigation.icon: i-lucide-download pnpm add -D @compodium/nuxt ``` ```bash [npm] -npm add -D @compodium/nuxt +npm install -D @compodium/nuxt ``` ```bash [yarn] yarn add -D @compodium/nuxt @@ -50,7 +50,7 @@ That's it! You can now access compodium from the Nuxt Devtools or on `/__compodi pnpm add -D @compodium/vue ``` ```bash [npm] -npm add -D @compodium/vue +npm install -D @compodium/vue ``` ```bash [yarn] yarn add -D @compodium/vue From 82d5568b76d16d6f32739f8fcb0962a7db7b18c0 Mon Sep 17 00:00:00 2001 From: Romain Hamel Date: Fri, 21 Mar 2025 08:03:27 +0100 Subject: [PATCH 05/18] docs: update readme --- packages/core/package.json | 2 ++ packages/vue/package.json | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/core/package.json b/packages/core/package.json index 7f694046..6f9fa4b2 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -10,6 +10,8 @@ }, "keywords": [ "nuxt", + "vue", + "vite", "components", "documentation" ], diff --git a/packages/vue/package.json b/packages/vue/package.json index 076172d8..b5dc10be 100644 --- a/packages/vue/package.json +++ b/packages/vue/package.json @@ -9,7 +9,7 @@ "directory": "packages/vue" }, "keywords": [ - "nuxt", + "vue", "components", "documentation" ], From 31cdf17f176f745ccc4ae3c714d04aea86cc9741 Mon Sep 17 00:00:00 2001 From: Romain Hamel Date: Fri, 21 Mar 2025 08:04:19 +0100 Subject: [PATCH 06/18] Update README.md --- README.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index baeec5ca..63c11360 100644 --- a/README.md +++ b/README.md @@ -15,6 +15,8 @@ A plug and play component playground for Vue and Nuxt. Compodium +[Documentation](https://compodium.dev/getting-started) + > [!WARNING] @@ -26,8 +28,9 @@ A plug and play component playground for Vue and Nuxt. - **No Stories Required**: Analyzes your component code directly, eliminating the need to write stories. - **Fast**: Built on top of Vite for rapid development and instant feedback, enhancing productivity. - **DevTools Integration**: Integrates with Vue and Nuxt devtools for a cohesive development experience. -- **Code generation**: Generates up-to-date template code based on component props, ready to copy and use instantly. - **UI Library Integrations**: Integrates with popular UI libraries, showcasing examples for locally installed components. +- **Code generation**: Generates up-to-date template code based on component props, ready to copy and use instantly. + ## Installation From e13ce9c1528c3f5fa81ba147b4bf556a9db3b954 Mon Sep 17 00:00:00 2001 From: Romain Hamel Date: Fri, 21 Mar 2025 08:07:11 +0100 Subject: [PATCH 07/18] Update README.md --- README.md | 6 ------ 1 file changed, 6 deletions(-) diff --git a/README.md b/README.md index 63c11360..cb5d3b25 100644 --- a/README.md +++ b/README.md @@ -9,12 +9,6 @@ A plug and play component playground for Vue and Nuxt. - - - - Compodium - - [Documentation](https://compodium.dev/getting-started) From 38ce7ea4b51939ceabc58ce4f6ab0438fbc20660 Mon Sep 17 00:00:00 2001 From: Romain Hamel Date: Fri, 21 Mar 2025 09:16:55 +0100 Subject: [PATCH 08/18] fix(vue): relative import resolution in virtual renderer --- packages/vue/src/plugins/renderer.ts | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/vue/src/plugins/renderer.ts b/packages/vue/src/plugins/renderer.ts index 0bc8959b..fbcdf6e2 100644 --- a/packages/vue/src/plugins/renderer.ts +++ b/packages/vue/src/plugins/renderer.ts @@ -1,7 +1,7 @@ import type { VitePlugin } from 'unplugin' import type { PluginOptions } from '@compodium/core' import { readFileSync, existsSync } from 'node:fs' -import { resolve } from 'node:path' +import { dirname, resolve } from 'node:path' export function rendererPlugin(options: PluginOptions): VitePlugin { return { @@ -42,13 +42,17 @@ export function rendererPlugin(options: PluginOptions): VitePlugin { throw new Error(`[Compodium] failed to resolve main file ${options.mainPath}.`) } + const mainDir = dirname(mainPath) const mainContent: string = readFileSync(mainPath, 'utf-8').replace( /createApp\([^)]*\)/, 'createApp(CompodiumRoot)' ).replace( /\.mount\([^)]*\)/, '.mount("#compodium")' - ).replace(/'.\//g, '\'@/') + ).replace(/(from|import)\s+(['"])([./])/g, (match, keyword, quote, path) => { + // Resolve the relative import based on the main directory + return `${keyword} ${quote}${resolve(mainDir, path)}/` + }) return `import CompodiumRoot from '${import.meta.resolve('@compodium/core/runtime/root.vue')}';\n${mainContent}` } From 2d4089285d2b5cb872a7eb1d8f870f159f3ca68b Mon Sep 17 00:00:00 2001 From: Romain Hamel Date: Fri, 21 Mar 2025 09:18:29 +0100 Subject: [PATCH 09/18] fix(devtools): add collection name in search menu --- packages/devtools/app/components/ComponentSearchMenu.vue | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/devtools/app/components/ComponentSearchMenu.vue b/packages/devtools/app/components/ComponentSearchMenu.vue index 2d4b40b5..1b8df69e 100644 --- a/packages/devtools/app/components/ComponentSearchMenu.vue +++ b/packages/devtools/app/components/ComponentSearchMenu.vue @@ -10,6 +10,7 @@ const items = computed(() => props.collections?.map(col => ({ id: col.name, ...col, + label: col.name, items: col.components.flatMap((comp) => { const label = comp?.isExample ? comp.pascalName.replace(/Example$/, '') : comp.pascalName return [ From fab4984523a447e3596eeddf678befa550610063 Mon Sep 17 00:00:00 2001 From: Romain Hamel Date: Fri, 21 Mar 2025 10:44:23 +0100 Subject: [PATCH 10/18] fix(devtools): hmr meta reload --- packages/devtools/app/pages/components.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/devtools/app/pages/components.vue b/packages/devtools/app/pages/components.vue index 959c5cfe..ec4122bc 100644 --- a/packages/devtools/app/pages/components.vue +++ b/packages/devtools/app/pages/components.vue @@ -12,7 +12,7 @@ hooks.hook('renderer:mounted', () => { rendererMounted.value = true hooks.hook('component:changed', async (path: string) => { - if (path === component.value?.filePath || path === component.value?.componentPath) { + if (path.endsWith(component.value?.filePath) || path.endsWith(component.value?.componentPath)) { await Promise.all([refreshMeta(), refreshExampleMeta()]) } }) From ad2440ef6a21b8ac36c3d58c063ca3b8a8ac5a10 Mon Sep 17 00:00:00 2001 From: Romain Hamel Date: Fri, 21 Mar 2025 10:46:29 +0100 Subject: [PATCH 11/18] fix(devtools): hide empty collections --- packages/devtools/app/components/ComponentCollectionMenu.vue | 2 +- packages/devtools/app/components/ComponentSearchMenu.vue | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/devtools/app/components/ComponentCollectionMenu.vue b/packages/devtools/app/components/ComponentCollectionMenu.vue index 7bd90ba9..423038a5 100644 --- a/packages/devtools/app/components/ComponentCollectionMenu.vue +++ b/packages/devtools/app/components/ComponentCollectionMenu.vue @@ -26,7 +26,7 @@ const treeItems = computed(() => { } })) })) - })) + })).filter(col => col.children?.length > 0) }) diff --git a/packages/devtools/app/components/ComponentSearchMenu.vue b/packages/devtools/app/components/ComponentSearchMenu.vue index 1b8df69e..cd040c45 100644 --- a/packages/devtools/app/components/ComponentSearchMenu.vue +++ b/packages/devtools/app/components/ComponentSearchMenu.vue @@ -27,7 +27,7 @@ const items = computed(() => })) ?? []) ] }) - })) + })).filter(col => col.items?.length > 0) ) defineShortcuts({ From eea5631ebeb11d3feea8a05622ab9ba2465d4fc8 Mon Sep 17 00:00:00 2001 From: Romain Hamel Date: Fri, 21 Mar 2025 10:59:16 +0100 Subject: [PATCH 12/18] feat(devtools): update welcome screen --- packages/devtools/app/pages/welcome.vue | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/packages/devtools/app/pages/welcome.vue b/packages/devtools/app/pages/welcome.vue index 59ce1e8f..20667cc6 100644 --- a/packages/devtools/app/pages/welcome.vue +++ b/packages/devtools/app/pages/welcome.vue @@ -25,9 +25,15 @@ onMounted(() => window.__COMPODIUM_HOOKS__ = hooks) or -

- nuxi module add @nuxt/ui@next -

+ From d7f4fce6900410e68485c8a9d10e17b0ca492e2e Mon Sep 17 00:00:00 2001 From: Romain Hamel Date: Fri, 21 Mar 2025 11:12:18 +0100 Subject: [PATCH 13/18] fix: typechecks --- packages/devtools/app/pages/components.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/devtools/app/pages/components.vue b/packages/devtools/app/pages/components.vue index ec4122bc..8569cba6 100644 --- a/packages/devtools/app/pages/components.vue +++ b/packages/devtools/app/pages/components.vue @@ -12,7 +12,7 @@ hooks.hook('renderer:mounted', () => { rendererMounted.value = true hooks.hook('component:changed', async (path: string) => { - if (path.endsWith(component.value?.filePath) || path.endsWith(component.value?.componentPath)) { + if (path.endsWith(component.value!.filePath) || (component.value?.componentPath && path.endsWith(component.value!.componentPath))) { await Promise.all([refreshMeta(), refreshExampleMeta()]) } }) From c095b9ce164d0b20af155a0aea5e7a2c61088937 Mon Sep 17 00:00:00 2001 From: Romain Hamel Date: Fri, 21 Mar 2025 11:52:21 +0100 Subject: [PATCH 14/18] fix(vue): expose global types --- .../content/1.getting-started/2.installation.md | 17 +++++++++++++++-- packages/core/src/types.ts | 9 +++++---- packages/vue/src/index.ts | 9 ++++++++- playgrounds/vue/tsconfig.app.json | 2 +- 4 files changed, 29 insertions(+), 8 deletions(-) diff --git a/docs/content/1.getting-started/2.installation.md b/docs/content/1.getting-started/2.installation.md index 393d17fe..85e61824 100644 --- a/docs/content/1.getting-started/2.installation.md +++ b/docs/content/1.getting-started/2.installation.md @@ -40,7 +40,7 @@ That's it! You can now access compodium from the Nuxt Devtools or on `/__compodi ### With Vue -::steps{level="2"} +::steps{level="3"} #### Install Compodium @@ -60,7 +60,6 @@ bun add -D @compodium/vue ``` :: - #### Add the Compodium plugin to your `vite.config.ts` ```ts [vite.config.ts] @@ -79,4 +78,18 @@ export default defineConfig({ ``` :: +#### Include compodium types in your `tsconfig.app.json` + +```json [tsconfig.app.json] +{ + "include": [ + "src/**/*.ts", + "src/**/*.tsx", + "src/**/*.vue", + "node_modules/@compodium/vue/dist/index.d.ts" + ], +} +``` +:: + That's it! You can now access compodium from the Vue Devtools or on `/__compodium__/devtools`. diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts index 0a919aae..10fc3b81 100644 --- a/packages/core/src/types.ts +++ b/packages/core/src/types.ts @@ -188,9 +188,10 @@ declare global { */ __COMPODIUM_HOOKS__?: Hookable - /** - * Macro to configure components and examples. - */ - extendCompodiumMeta: >(_options: CompodiumMeta['compodium']) => void } + + /** + * Macro to configure components and examples. + */ + function extendCompodiumMeta>(_options: CompodiumMeta['compodium']): void } diff --git a/packages/vue/src/index.ts b/packages/vue/src/index.ts index af3bc858..aefbef58 100644 --- a/packages/vue/src/index.ts +++ b/packages/vue/src/index.ts @@ -1,4 +1,4 @@ -import type { PluginOptions } from '@compodium/core' +import type { CompodiumMeta, PluginOptions } from '@compodium/core' import { compodium as core } from '@compodium/core' import { rendererPlugin } from './plugins/renderer' import { vueDevtoolsPlugin } from './plugins/vueDevtools' @@ -30,3 +30,10 @@ export const compodium = /* #__PURE__ */ (opts?: Partial>(_options: CompodiumMeta['compodium']): void +} diff --git a/playgrounds/vue/tsconfig.app.json b/playgrounds/vue/tsconfig.app.json index 874487f4..d63e490e 100644 --- a/playgrounds/vue/tsconfig.app.json +++ b/playgrounds/vue/tsconfig.app.json @@ -1,6 +1,6 @@ { "extends": "@vue/tsconfig/tsconfig.dom.json", - "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "auto-imports.d.ts", "components.d.ts"], + "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "auto-imports.d.ts", "components.d.ts", "node_modules/@compodium/vue/dist/index.d.ts"], "exclude": ["src/**/__tests__/*"], "compilerOptions": { "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", From b15a9755f26ba95b6b57456022178e94b6093536 Mon Sep 17 00:00:00 2001 From: Romain Hamel Date: Fri, 21 Mar 2025 12:20:46 +0100 Subject: [PATCH 15/18] docs: tweaks --- docs/content/1.getting-started/2.installation.md | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/docs/content/1.getting-started/2.installation.md b/docs/content/1.getting-started/2.installation.md index 85e61824..910b8a83 100644 --- a/docs/content/1.getting-started/2.installation.md +++ b/docs/content/1.getting-started/2.installation.md @@ -8,7 +8,7 @@ navigation.icon: i-lucide-download ### With Nuxt -::steps{level="2"} +::steps{level="4"} #### Install Compodium @@ -40,7 +40,7 @@ That's it! You can now access compodium from the Nuxt Devtools or on `/__compodi ### With Vue -::steps{level="3"} +::steps{level="4"} #### Install Compodium @@ -62,11 +62,11 @@ bun add -D @compodium/vue #### Add the Compodium plugin to your `vite.config.ts` -```ts [vite.config.ts] +```ts [vite.config.ts]{3,8} import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import vueDevTools from 'vite-plugin-vue-devtools' -import compodium from '@compodium/vue' +import { compodium } from '@compodium/vue' export default defineConfig({ plugins: [ @@ -76,11 +76,10 @@ export default defineConfig({ ] }) ``` -:: #### Include compodium types in your `tsconfig.app.json` -```json [tsconfig.app.json] +```json [tsconfig.app.json]{6} { "include": [ "src/**/*.ts", From ea016fdfd2c9558d1b060e537e8663cd46543bf1 Mon Sep 17 00:00:00 2001 From: Romain Hamel Date: Fri, 21 Mar 2025 12:21:30 +0100 Subject: [PATCH 16/18] docs: tweaks --- docs/content/2.essentials/3.configuration.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/content/2.essentials/3.configuration.md b/docs/content/2.essentials/3.configuration.md index 94ecdc11..df820a54 100644 --- a/docs/content/2.essentials/3.configuration.md +++ b/docs/content/2.essentials/3.configuration.md @@ -58,7 +58,7 @@ export default defineConfig({ /** * Configure your application's mainPath */ - mainPath?: 'src/main.ts', + mainPath: 'src/main.ts', /* List of glob patterns to ignore components */ ignore: [], From 8491bb8921c2cfb7001855da5b51b4d8597a7f4c Mon Sep 17 00:00:00 2001 From: Romain Hamel Date: Sat, 22 Mar 2025 11:04:39 +0100 Subject: [PATCH 17/18] chore: up --- README.md | 5 +++-- docs/content/1.getting-started/2.installation.md | 4 ++-- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index cb5d3b25..0d23f37f 100644 --- a/README.md +++ b/README.md @@ -43,16 +43,17 @@ pnpm add -D @compodium/vue ``` ```bash [yarn] -yarn add -D @compodium/vue +yarn add --dev @compodium/vue ``` ```bash [npm] -npm install -D @compodium/vue +npm install --save-dev @compodium/vue ``` ```bash [bun] bun add -D @compodium/vue ``` + Add the Nuxt UI Vite plugin in your `vite.config.ts`: ```ts [vite.config.ts] diff --git a/docs/content/1.getting-started/2.installation.md b/docs/content/1.getting-started/2.installation.md index 910b8a83..c3d36041 100644 --- a/docs/content/1.getting-started/2.installation.md +++ b/docs/content/1.getting-started/2.installation.md @@ -17,10 +17,10 @@ navigation.icon: i-lucide-download pnpm add -D @compodium/nuxt ``` ```bash [npm] -npm install -D @compodium/nuxt +npm install --save-dev @compodium/nuxt ``` ```bash [yarn] -yarn add -D @compodium/nuxt +yarn add --dev @compodium/nuxt ``` ```bash [bun] bun add -D @compodium/nuxt From 575208061cf1d8012099e05c2f808be22019d6fe Mon Sep 17 00:00:00 2001 From: Romain Hamel Date: Sat, 22 Mar 2025 11:24:00 +0100 Subject: [PATCH 18/18] docs: tweaks --- README.md | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 0d23f37f..f91ccd0b 100644 --- a/README.md +++ b/README.md @@ -54,7 +54,7 @@ npm install --save-dev @compodium/vue bun add -D @compodium/vue ``` -Add the Nuxt UI Vite plugin in your `vite.config.ts`: +2. Add the Compodium plugin in your `vite.config.ts`: ```ts [vite.config.ts] import { defineConfig } from 'vite' @@ -70,6 +70,20 @@ export default defineConfig({ ] }) ``` + +3. Include compodium types in your `tsconfig.app.json` + +```json [tsconfig.app.json]{6} +{ + "include": [ + "src/**/*.ts", + "src/**/*.tsx", + "src/**/*.vue", + "node_modules/@compodium/vue/dist/index.d.ts" + ], +} +``` + ## Contribution Contributions are welcome! ♥️