8.8k

Astro

PreviousNext

Install and configure Astro.

Create project

Start by creating a new Astro project:

pnpm createastro@latest astro-app  --template with-tailwindcss --install --add vue --git

Edit tsconfig.json file

Add the following code to the tsconfig.json file to resolve paths:

tsconfig.json
{
  "compilerOptions": {
    // ...
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "./src/*"
      ]
    }
    // ...
  }
}

Run the CLI

Run the shadcn init command to setup your project:

pnpm dlx shadcn-vue@latest init

Add Components

You can now start adding components to your project.

pnpm dlx shadcn-vue@latest add button

The command above will add the Button component to your project. You can then import it like this:

src/pages/index.astro
---
import { Button } from "@/components/ui/button"
---

<html lang="en">
    <head>
        <title>Astro</title>
    </head>
    <body>
        <Button>Hello World</Button>
    </body>
</html>
NuxtLaravel