Astro Template: Moon Base

Astro Moon Base is an opinionated Astro 5 starter template with built-in support for Vue, shadcn-vue, Tailwind CSS, Prettier, view transitions, and import aliases and includes a basic starter component.

Using create-astro@latest provides everything you need to create a basic Astro application. However, it is missing a few useful items that you might find yourself manually adding to every new Astro project. The Moon Base template was created to automatically include these items as well as support for Vue and shadcn-vue. This provides a great starting point for a new Astro project with Vue client islands, Tailwind and shadcn-vue.

The template includes:

• An initial Astro project structure
• Astro View Transitions
• Astro Import Aliases
• Tailwind CSS v4.1
• Prettier
• Vue
• shadcn-vue
• A default MainLayout.astro layout file
• A default global.css file
• A default components.json file with neutral base color
• Default .vscode files to properly handle Tailwind CSS, recommended extensions, and default Prettier formatters
• A starter component to showcase Tailwind CSS
• The dev script set to "astro dev --open"

An optional PowerShell function (standalone or as part of a PowerShell module) is available to deploy the above template and provide the following additional functionality:

• Creates an additional empty folder: assets
• Blanks out the README.md file
• Runs the prettier CLI to provide an intial format of all project files
• Initializes a Git repository
• Automatically navigates to the project folder and peforms an initial install
• Runs astro update to update the core Astro packages to the latest versions and runs your preferred package manager (npm or bun) to update the other packages
• Provides an option to launch the site and/or open the project folder with VS Code post deployment

Deployment Methods

bun

bunx create-astro@latest -- --template smart-ace-designs/astro-moonbase project-name

npm

npx create-astro@latest -- --template smart-ace-designs/astro-moonbase project-name

pnpm

pnpm create astro@latest --template smart-ace-designs/astro-moonbase project-name

yarn

yarn create astro@latest --template smart-ace-designs/astro-moonbase project-name

PowerShell

The optional PowerShell function and module are available here: SmartAceDesigns.AstroLiftoff

New-AstroProject -ProjectName project-name -Location parent-directory -Template astro-moonbase

astro-moonbase.mp4

Using shadcn-vue Components

To add a shadcn-vue component to your Astro project for use with a Vue client island: shadcn-vue CLI

Project Structure

After deploying the Astro Moon Base template you will see the following files and directories in your project root:

/
├── .vscode/
│   ├── extensions.json
│   ├── launch.json
│   └── settings.json
├── public/
│   └── favicon.svg
├── src/
│   ├── components/
│   │   └── AstroWelcome.astro
│   ├── layouts/
│   │   └── MainLayout.astro
│   ├── lib/
│   │   └── utils.ts
│   ├── pages/
│   │   └── index.astro
│   └── styles/
│       └── global.css
├── .gitignore
├── .prettierrc.mjs
├── astro.config.mjs
├── components.json
├── package.json
├── README.md
└── tsconfig.json

The optional New-AstroProject PowerShell function will add this additional directory to your project root:

/
└── src/
    └── assets/