Astro Template: Moon Base

Astro Moon Base is an opinionated Astro 6 starter template with built-in support for Vue, shadcn-vue, Tailwind CSS, Prettier, view transitions, and aliases.

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

The template includes:

• An initial Astro 6 project structure
• Astro View Transitions
• Astro Aliases
• Tailwind CSS
• 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
• 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

npm

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

bun

bun 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
├── .prettierignore
├── .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/