Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add Steps component to from-nuxtjs.mdx #8118

Merged
merged 1 commit into from
May 2, 2024
Merged

Add Steps component to from-nuxtjs.mdx #8118

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 7 additions & 5 deletions src/content/docs/en/guides/migrate-to-astro/from-nuxtjs.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,9 @@ stub: false
framework: NuxtJS
i18nReady: true
---
import AstroVueTabs from '~/components/tabs/AstroVueTabs.astro'
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
import { Steps } from '@astrojs/starlight/components';
import AstroVueTabs from '~/components/tabs/AstroVueTabs.astro';
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
import { FileTree } from '@astrojs/starlight/components';

Here are some key concepts and migration strategies to help you get started. Use the rest of our docs and our [Discord community](https://astro.build/chat) to keep going!
Expand Down Expand Up @@ -89,13 +90,15 @@ You may find it useful to install some of [Astro's optional integrations](/en/gu

### Put your source code in `src`

<Steps>
1. **Move** the contents of Nuxt's `static/` folder into `public/`.

Astro uses the `public/` directory for static assets, similar to Nuxt's `static/` folder.

2. **Copy or Move** Nuxt's other files and folders (e.g. `pages`, `layouts` etc.) into Astro's `src/` folder.

Like Nuxt, Astro's `src/pages/` folder is a special folder used for file-based routing. All other folders are optional, and you can organize the contents of your `src/` folder any way you like. Other common folders in Astro projects include `src/layouts/`, `src/components`, `src/styles`, `src/scripts`.
</Steps>

### Convert Vue SFC pages to `.astro` files

Expand Down Expand Up @@ -251,7 +254,6 @@ To convert to Astro, change this underscored dynamic path property (e.g. `_name.
- astro.config.mjs
</FileTree>


#### Markdown and MDX pages

Astro has built-in support for Markdown and an optional integration for MDX files. You can reuse any existing Markdown and MDX pages, but they may require some adjustments to their frontmatter, such as adding [Astro's special `layout` frontmatter property](/en/basics/layouts/#markdownmdx-layouts).
Expand Down Expand Up @@ -458,8 +460,6 @@ Nuxt utilizes Vue's component styling to generate a page's style.
</style>
```



#### Pre-processor support

[Astro supports the most popular CSS preprocessors](/en/guides/styling/#css-preprocessors) by installing them as a dev dependency. For example, to use SCSS:
Expand Down Expand Up @@ -512,6 +512,7 @@ Here is an example of Nuxt Pokédex data fetch converted to Astro.

Here's how to recreate that in `src/pages/index.astro`, replacing `asyncData()` with `fetch()`.

<Steps>
1. Identify the `<template>` and `<style>` in the Vue SFC.

```jsx title="pages/index.vue" {2-13,47-55}
Expand Down Expand Up @@ -667,6 +668,7 @@ Here's how to recreate that in `src/pages/index.astro`, replacing `asyncData()`
/* ... */
</style>
```
</Steps>

## Community Resources

Expand Down
Loading