diff --git a/apps/www/.vitepress/theme/config/docs.ts b/apps/www/.vitepress/theme/config/docs.ts index 727c003b9..ba060901f 100644 --- a/apps/www/.vitepress/theme/config/docs.ts +++ b/apps/www/.vitepress/theme/config/docs.ts @@ -108,11 +108,11 @@ export const docsConfig: DocsConfig = { href: '/docs/installation/nuxt', items: [], }, - // { - // title: 'Astro', - // href: '/docs/installation/astro', - // items: [], - // }, + { + title: 'Astro', + href: '/docs/installation/astro', + items: [], + }, { title: 'Laravel', href: '/docs/installation/laravel', diff --git a/apps/www/src/content/docs/installation.md b/apps/www/src/content/docs/installation.md index 59d92b2ce..899f8244b 100644 --- a/apps/www/src/content/docs/installation.md +++ b/apps/www/src/content/docs/installation.md @@ -5,7 +5,7 @@ description: How to install dependencies and structure your app. ## Frameworks -
+
Vite -

Vite

+

Vite

 Nuxt -

Nuxt

+

Nuxt

 - +

Astro

+ -

Laravel

+

Laravel
diff --git a/apps/www/src/content/docs/installation/astro.md b/apps/www/src/content/docs/installation/astro.md index 3d78e8485..fd3b2de94 100644 --- a/apps/www/src/content/docs/installation/astro.md +++ b/apps/www/src/content/docs/installation/astro.md @@ -32,20 +32,30 @@ Strict Yes/No ``` -### Add React to your project +### Add Vue to your project -Install React using the Astro CLI: +Install Vue using the Astro CLI: ```bash -npx astro add react +npx astro add vue ``` -Answer `Yes` to all the question prompted by the CLI when installing React. +Answer `Yes` to all the question prompted by the CLI when installing Vue. +This will install `vue` and `@astrojs/vue` as dependencies and automatically set them up in the `astro.config.mjs` file. + +### Install TypeScript + +If you encounter the error `Cannot find module 'typescript'`, please proceed to install TypeScript as a dev dependency, as discussed [here](https://github.com/radix-vue/shadcn-vue/pull/118) + +```bash +npm install -D typescript +``` + ### Add Tailwind CSS to your project Install Tailwind CSS using the Astro CLI: @@ -60,6 +70,8 @@ Answer `Yes` to all the question prompted by the CLI when installing Tailwind CS +This will install `tailwindcss` and `@astrojs/tailwind` as dependencies and set them up in your `astro.config.mjs` file. It will also create a `tailwind.config.mjs` file with the needed configurations. + ### Edit tsconfig.json file Add the code below to the tsconfig.json file to resolve paths: @@ -77,10 +89,10 @@ Add the code below to the tsconfig.json file to resolve paths: ### Run the CLI -Run the `shadcn-ui` init command to setup your project: +Run the `shadcn-vue` init command to setup your project: ```bash -npx shadcn-ui@latest init +npx shadcn-vue@latest init ``` ### Configure components.json @@ -89,14 +101,15 @@ You will be asked a few questions to configure `components.json`: ```txt showLineNumbers Would you like to use TypeScript (recommended)? no / yes +Which framework are you using? Astro Which style would you like to use? › Default Which color would you like to use as base color? › Slate -Where is your global CSS file? › › ./src/styles/globals.css +Where is your global CSS file? › src/styles/globals.css Do you want to use CSS variables for colors? › no / yes -Where is your tailwind.config.js located? › tailwind.config.cjs +Where is your tailwind.config located? › tailwind.config.mjs Configure the import alias for components: › @/components Configure the import alias for utils: › @/lib/utils -Are you using React Server Components? › no +Write configuration to components.json. Proceed? > Y/n ``` ### Import the globals.css file @@ -126,7 +139,7 @@ export default defineConfig({ You can now start adding components to your project. ```bash -npx shadcn-ui@latest add button +npx shadcn-vue@latest add button ``` The command above will add the `Button` component to your project. You can then import it like this: