Zum Inhalt springen

Migrating from Gridsome

Dieser Inhalt ist noch nicht in deiner Sprache verfügbar.

Gridsome is an open-source static site generator built on Vue and GraphQL.

Key Similarities between Gridsome and Astro

Section titled Key Similarities between Gridsome and Astro

Gridsome and Astro share some similarities that will help you migrate your project:

Key Differences between Gridsome and Astro

Section titled Key Differences between Gridsome and Astro

When you rebuild your Gridsome site in Astro, you will notice some important differences:

  • Gridsome is a Vue-based single-page application (SPA). Astro sites are multi-page apps built using .astro components, but can also support React, Preact, Vue.js, Svelte, SolidJS, AlpineJS and raw HTML templating.

  • As an SPA, Gridsome uses vue-router for SPA routing, and vue-meta for managing <head>. In Astro, you will create separate HTML pages and control your page <head> directly, or in a layout component.

  • Local file data: Gridsome uses GraphQL to retrieve data from your project files. Astro uses ESM imports and import.meta.glob() to import data from local project files. Remote resources can be loaded using the standard fetch() API. GraphQL may be optionally added to your project, but is not included by default.

To convert a Gridsome blog to Astro, start with our 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.

Terminal window
npm create astro@latest -- --template blog

Bring your existing Markdown (or MDX, with our optional integration) files as content to create Markdown or MDX pages.

Since Gridsome’s project structure is similar to Astro’s, you may be able to copy several existing files from your project into the same location in your new Astro project. However, the two project structures are not identical. You may want to examine Astro’s project structure to see what the differences are.

Since Astro queries and imports your local files differently than Gridsome, you may want to read about [how to load files using import.meta.glob() to understand how to work with your local files.

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.

Weitere Migrations-Anleitungen

Wirke mit

Worum geht es?

Community