Migrating from NuxtJS
NuxtJS is a framework for building web applications on top of Vue.
Key Similarities between Nuxt and Astro
Section titled Key Similarities between Nuxt and AstroNuxt and Astro share some similarities that will help you migrate your project:
-
Both Nuxt and Astro are modern Javascript static-site generators with similar project file structures.
-
Both Nuxt and Astro use a
src/folder for your project files and a specialsrc/pages/folder for file-based routing. Creating and managing pages for your site should feel familiar. -
Astro has an official integration for using Vue components and supports installing NPM packages, including several for Vue. You will be able to write Vue UI components, and may be able to keep some or all of your existing components and dependencies.
-
Astro and Nuxt both allow you to use a headless CMS, APIs or Markdown files for data. You can continue to use your preferred content authoring system, and will be able to keep your existing content.
Key Differences between Nuxt and Astro
Section titled Key Differences between Nuxt and AstroWhen you rebuild your Nuxt site in Astro, you will notice some important differences:
-
MPA vs SPA: Nuxt is a Vue-based SPA (single-page application). Astro sites are multi-page apps built using
.astrocomponents, but can also support React, Preact, Vue.js, Svelte, SolidJS, AlpineJS, Lit and raw HTML templating. -
Page Routing: Nuxt uses
vue-routerfor SPA routing, andvue-metafor managing<head>. In Astro, you will create separate HTML page routes and control your page<head>directly, or in a layout component. -
Content-focus: Astro was designed to excel at making content-focused websites. An existing Nuxt app might be built for high client-side interactivity and may include items that are difficult to replicate in Astro, such as dashboards.
Switch from Nuxt to Astro
Section titled Switch from Nuxt to AstroTo convert a Nuxt blog to Astro, start with our official blog theme starter template, or explore more community blog themes in our theme showcase.
You can pass a --template argument to the create astro command to start a new Astro project with one of our official starters. Or, you can start a new project from any existing Astro repository on GitHub.
pnpm create astro@latest --template blogyarn create astro --template blognpm create astro@latest -- --template blogBring your existing Markdown (or MDX, with our optional integration) files as content to create Markdown or MDX pages.
While file-based routing and layout components are similar in Astro, you may wish to read about Astro’s project structure to learn where files should be located. For example, Astro uses a public/ folder outside of src/ for static assets.
To convert other types of sites, such as a portfolio or documentation site, see more official starter templates on astro.new. You’ll find a link to each project’s GitHub repository, as well as one-click links to open a working project in StackBlitz, CodeSandbox and Gitpod online development environments.
Community Resources
Section titled Community Resources-
Blog Post: From Nuxt to Astro - rebuilding with Astro
-
Add your own!
