diff --git a/apps/www/.vitepress/theme/config/docs.ts b/apps/www/.vitepress/theme/config/docs.ts index 727c003b..ba060901 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 59d92b2c..899f8244 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 3d78e848..a553379e 100644 --- a/apps/www/src/content/docs/installation/astro.md +++ b/apps/www/src/content/docs/installation/astro.md @@ -32,20 +32,22 @@ 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. + ### Add Tailwind CSS to your project Install Tailwind CSS using the Astro CLI: @@ -60,6 +62,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 +81,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,27 +93,27 @@ 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? Vite 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/index.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.js 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 +Configure the import alias for utils: › @/lib/utils ``` -### Import the globals.css file +### Import the index.css file -Import the `globals.css` file in the `src/index.astro` file: +Import the `index.css` file in the `src/index.astro` file: ```ts {2} showLineNumbers -import '@/styles/globals.css' +import '@/index.css' ``` ### Update astro tailwind config -To prevent serving the Tailwind base styles twice, we need to tell Astro not to apply the base styles, since we already include them in our own `globals.css` file. To do this, set the `applyBaseStyles` config option for the tailwind plugin in `astro.config.mjs` to `false`. +To prevent serving the Tailwind base styles twice, we need to tell Astro not to apply the base styles, since we already include them in our own `index.css` file. To do this, set the `applyBaseStyles` config option for the tailwind plugin in `astro.config.mjs` to `false`. ```ts {3-5} showLineNumbers export default defineConfig({ @@ -126,7 +130,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: