From 4065b1ceb5e4f8331ce90bded42738f008625f71 Mon Sep 17 00:00:00 2001 From: Chris Swithinbank Date: Thu, 11 May 2023 18:23:24 +0200 Subject: [PATCH 01/27] Fix some formatting errors (#3231) --- package.json | 4 +-- pnpm-lock.yaml | 26 ++++++++++++++------ src/components/PageContent/PageContent.astro | 15 ++++++----- src/components/tabs/AstroJSXTabs.astro | 8 +++--- src/components/tabs/AstroVueTabs.astro | 8 +++--- src/components/tutorial/TutorialNav.astro | 2 +- src/i18n/translation-checkers.ts | 2 +- src/layouts/MainLayout.astro | 4 +-- src/pages/open-graph/[...path].ts | 2 +- src/util/isOutdated.ts | 2 +- 10 files changed, 41 insertions(+), 32 deletions(-) diff --git a/package.json b/package.json index 5274777cc5830..ebbde7951cef7 100644 --- a/package.json +++ b/package.json @@ -77,8 +77,8 @@ "p-retry": "^5.1.1", "parse-numeric-range": "^1.3.0", "preact": "^10.10.1", - "prettier": "^2.8.1", - "prettier-plugin-astro": "^0.7.0", + "prettier": "^2.8.8", + "prettier-plugin-astro": "^0.8.0", "prompts": "^2.4.2", "rehype": "^12.0.1", "remark": "^14.0.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index aed1bb8f91a7e..00937088e561f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -178,11 +178,11 @@ devDependencies: specifier: ^10.10.1 version: 10.10.1 prettier: - specifier: ^2.8.1 - version: 2.8.1 + specifier: ^2.8.8 + version: 2.8.8 prettier-plugin-astro: - specifier: ^0.7.0 - version: 0.7.0 + specifier: ^0.8.0 + version: 0.8.0 prompts: specifier: ^2.4.2 version: 2.4.2 @@ -422,7 +422,7 @@ packages: dependencies: '@vscode/emmet-helper': 2.8.4 events: 3.3.0 - prettier: 2.8.1 + prettier: 2.8.8 prettier-plugin-astro: 0.7.0 source-map: 0.7.4 vscode-css-languageservice: 6.0.1 @@ -5352,13 +5352,23 @@ packages: engines: {node: ^14.15.0 || >=16.0.0, npm: '>=6.14.0'} dependencies: '@astrojs/compiler': 0.29.13 - prettier: 2.8.1 + prettier: 2.8.8 sass-formatter: 0.7.5 synckit: 0.8.4 dev: true - /prettier@2.8.1: - resolution: {integrity: sha512-lqGoSJBQNJidqCHE80vqZJHWHRFoNYsSpP9AjFhlhi9ODCJA541svILes/+/1GM3VaL/abZi7cpFzOpdR9UPKg==} + /prettier-plugin-astro@0.8.0: + resolution: {integrity: sha512-kt9wk33J7HvFGwFaHb8piwy4zbUmabC8Nu+qCw493jhe96YkpjscqGBPy4nJ9TPy9pd7+kEx1zM81rp+MIdrXg==} + engines: {node: ^14.15.0 || >=16.0.0, pnpm: '>=7.14.0'} + dependencies: + '@astrojs/compiler': 1.3.2 + prettier: 2.8.8 + sass-formatter: 0.7.5 + synckit: 0.8.4 + dev: true + + /prettier@2.8.8: + resolution: {integrity: sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==} engines: {node: '>=10.13.0'} hasBin: true dev: true diff --git a/src/components/PageContent/PageContent.astro b/src/components/PageContent/PageContent.astro index 7e4360ad3ab38..da4dab73c551f 100644 --- a/src/components/PageContent/PageContent.astro +++ b/src/components/PageContent/PageContent.astro @@ -20,14 +20,13 @@ const title = content.title .replace('@astrojs/', '@astrojs/') .replaceAll('-', '⁠-⁠'); const isFallback = !!Astro.params.fallback || undefined; -const outdated = - Astro.params.lang === 'en' || Astro.params.fallback - ? false - : await isOutdated( - ( - await getEntryBySlug('docs', `${Astro.params.lang}/${Astro.params.slug}`) - )?.id! - ); +let outdated: boolean; +if (Astro.params.lang === 'en' || Astro.params.fallback) { + outdated = false; +} else { + const currentEntry = await getEntryBySlug('docs', `${Astro.params.lang}/${Astro.params.slug}`); + outdated = await isOutdated(currentEntry?.id!); +} const lang = getLanguageFromURL(Astro.url.pathname); const bcpLang = normalizeLangTag(lang); const direction = rtlLanguages.has(lang) ? 'rtl' : 'ltr'; diff --git a/src/components/tabs/AstroJSXTabs.astro b/src/components/tabs/AstroJSXTabs.astro index 275ae9f7d63b2..5832006548ecf 100644 --- a/src/components/tabs/AstroJSXTabs.astro +++ b/src/components/tabs/AstroJSXTabs.astro @@ -6,12 +6,12 @@ import Tabs from './Tabs'; JSX Astro - + + - + + diff --git a/src/components/tabs/AstroVueTabs.astro b/src/components/tabs/AstroVueTabs.astro index 009f82488401f..f1dc5c7284842 100644 --- a/src/components/tabs/AstroVueTabs.astro +++ b/src/components/tabs/AstroVueTabs.astro @@ -6,12 +6,12 @@ import Tabs from './Tabs'; Vue Astro - + + - + + diff --git a/src/components/tutorial/TutorialNav.astro b/src/components/tutorial/TutorialNav.astro index f769c45108d28..269cae9c28482 100644 --- a/src/components/tutorial/TutorialNav.astro +++ b/src/components/tutorial/TutorialNav.astro @@ -19,7 +19,7 @@ const tutorialPages = getTutorialPages(pages, lang); const units = getTutorialUnits(tutorialPages); const makeUnitId = (index: number) => `${Astro.props.id}__tutorial-unit-nav-panel-${index}`; -const isCurrentUnit = (unit: typeof units[number]) => +const isCurrentUnit = (unit: (typeof units)[number]) => unit.lessons.some((lesson) => currentUrl.endsWith(lesson.slug)); --- diff --git a/src/i18n/translation-checkers.ts b/src/i18n/translation-checkers.ts index 36f79b8eb003b..f7e09ea703d4b 100644 --- a/src/i18n/translation-checkers.ts +++ b/src/i18n/translation-checkers.ts @@ -10,7 +10,7 @@ export type UILanguageKeys = keyof typeof languages; /** Helper to type check a dictionary of UI string translations. */ export const UIDictionary = (dict: Partial) => dict; -type NavDictionaryKeys = typeof enNav[number]['key']; +type NavDictionaryKeys = (typeof enNav)[number]['key']; export type NavDict = Array< { text: string; diff --git a/src/layouts/MainLayout.astro b/src/layouts/MainLayout.astro index 423bb8d722e2f..097d02d370ad4 100644 --- a/src/layouts/MainLayout.astro +++ b/src/layouts/MainLayout.astro @@ -23,8 +23,8 @@ const overview = t('rightSidebar.overview'); --- - - + + { headings && ( diff --git a/src/pages/open-graph/[...path].ts b/src/pages/open-graph/[...path].ts index 497a9797d9e20..bc86495b73884 100644 --- a/src/pages/open-graph/[...path].ts +++ b/src/pages/open-graph/[...path].ts @@ -14,7 +14,7 @@ export const { getStaticPaths, get } = OGImageRoute({ pages, - getImageOptions: async (_, { data, slug }: typeof pages[string]) => { + getImageOptions: async (_, { data, slug }: (typeof pages)[string]) => { return { title: data.title, description: data.description, diff --git a/src/util/isOutdated.ts b/src/util/isOutdated.ts index 24ecf19d96a34..08869e2e5d143 100644 --- a/src/util/isOutdated.ts +++ b/src/util/isOutdated.ts @@ -25,5 +25,5 @@ export async function isOutdated(pagePath: CollectionEntry<'docs'>['id']) { const pageData = await builder.getSinglePageData(pagePath); const enPageData = await builder.getSinglePageData(`en/${rawPath}`); - if (pageData.lastMajorChange < enPageData.lastMajorChange) return true; + return pageData.lastMajorChange < enPageData.lastMajorChange; } From c359bc2c800f70cca2a3350a5cf47156aedfb9ca Mon Sep 17 00:00:00 2001 From: nkadebug <66764893+nkadebug@users.noreply.github.com> Date: Thu, 11 May 2023 22:02:39 +0530 Subject: [PATCH 02/27] Update google-firebase.mdx (#3230) Co-authored-by: Chris Swithinbank --- src/content/docs/en/guides/backend/google-firebase.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/en/guides/backend/google-firebase.mdx b/src/content/docs/en/guides/backend/google-firebase.mdx index 71d5bbffe6c23..e2d3ca2126b2a 100644 --- a/src/content/docs/en/guides/backend/google-firebase.mdx +++ b/src/content/docs/en/guides/backend/google-firebase.mdx @@ -186,7 +186,7 @@ Create three endpoints related to authentication in a new directory `src/pages/a ```ts title="src/pages/api/auth/signin.ts" import type { APIRoute } from "astro"; -import { app } from "../../../lib/firebase/server"; +import { app } from "../../../firebase/server"; import { getAuth } from "firebase-admin/auth"; export const get: APIRoute = async ({ request, cookies, redirect }) => { From 6ecc157ac761ebaa9c713aa69618cac3295f5191 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Alves?= <71379045+andremralves@users.noreply.github.com> Date: Thu, 11 May 2023 13:55:06 -0300 Subject: [PATCH 03/27] i18n(pt-BR): translated `backend.mdx` (#3227) * i18n(pt-BR): translate backend services guide * Update src/content/docs/pt-br/guides/backend.mdx Co-authored-by: Yan Thomas <61414485+Yan-Thomas@users.noreply.github.com> * Update src/content/docs/pt-br/guides/backend.mdx Co-authored-by: Yan Thomas <61414485+Yan-Thomas@users.noreply.github.com> * Update src/content/docs/pt-br/guides/backend.mdx Co-authored-by: Yan Thomas <61414485+Yan-Thomas@users.noreply.github.com> * Update src/content/docs/pt-br/guides/backend.mdx Co-authored-by: Yan Thomas <61414485+Yan-Thomas@users.noreply.github.com> * Update src/content/docs/pt-br/guides/backend.mdx Co-authored-by: Yan Thomas <61414485+Yan-Thomas@users.noreply.github.com> * Update src/content/docs/pt-br/guides/backend.mdx Co-authored-by: Yan Thomas <61414485+Yan-Thomas@users.noreply.github.com> * Update src/content/docs/pt-br/guides/backend.mdx Co-authored-by: Yan Thomas <61414485+Yan-Thomas@users.noreply.github.com> * Update src/content/docs/pt-br/guides/backend.mdx Co-authored-by: Yan Thomas <61414485+Yan-Thomas@users.noreply.github.com> * Update src/i18n/pt-br/nav.ts Co-authored-by: Yan Thomas <61414485+Yan-Thomas@users.noreply.github.com> * use backend instead of back-end --------- Co-authored-by: Yan Thomas <61414485+Yan-Thomas@users.noreply.github.com> --- src/content/docs/pt-br/guides/backend.mdx | 27 +++++++++++++++++++ .../docs/pt-br/guides/deploy/netlify.mdx | 2 +- src/i18n/pt-br/nav.ts | 1 + 3 files changed, 29 insertions(+), 1 deletion(-) create mode 100644 src/content/docs/pt-br/guides/backend.mdx diff --git a/src/content/docs/pt-br/guides/backend.mdx b/src/content/docs/pt-br/guides/backend.mdx new file mode 100644 index 0000000000000..f5efefc4e5f7f --- /dev/null +++ b/src/content/docs/pt-br/guides/backend.mdx @@ -0,0 +1,27 @@ +--- +title: Use um serviço de backend com o Astro +description: Como usar um serviço de backend para adicionar autenticação, armazenamento e dados +i18nReady: true +--- +import BackendGuidesNav from '~/components/BackendGuidesNav.astro'; + +**Pronto para adicionar recursos como autenticação, armazenamento ou dados ao seu projeto em Astro?** Siga um de nossos guias para integrar um serviço de backend. + +## Guia de serviços de backend + + +Note que várias dessas páginas são **esboços**: coleções de recursos esperando por sua contribuição. + +## O que é um serviço de backend? + +Um serviço de backend é um sistema baseado em nuvem que ajuda você a criar e gerenciar sua infraestrutura de backend. Ele fornece um conjunto de ferramentas e serviços para gerenciamento de bancos de dados, autenticação de usuário e outras funcionalidades do lado do servidor. Isso permite que você se concentre na construção de suas aplicações sem ter que se preocupar com o gerenciamento da infraestrutura interna. + +## Por que eu usaria um serviço de backend? + +Você pode querer considerar um serviço de backend se seu projeto tiver necessidades complexas do lado do servidor, como por exemplo: +- registro e autenticação de usuário +- armazenamento de dados persistente +- armazenamento de assets carregados pelo usuário +- geração de API +- comunicação em tempo real + diff --git a/src/content/docs/pt-br/guides/deploy/netlify.mdx b/src/content/docs/pt-br/guides/deploy/netlify.mdx index 9d8cd21fc7260..90f5bf0157547 100644 --- a/src/content/docs/pt-br/guides/deploy/netlify.mdx +++ b/src/content/docs/pt-br/guides/deploy/netlify.mdx @@ -4,7 +4,7 @@ description: Como fazer o deploy do seu site Astro para a web na Netlify. type: deploy i18nReady: true --- -[Netlify](https://netlify.com) oferece hospedagem e serviços de back-end serverless para aplicações web e sites estáticos. Qualquer site Astro pode ser hospedado na Netlify! +[Netlify](https://netlify.com) oferece hospedagem e serviços de backend serverless para aplicações web e sites estáticos. Qualquer site Astro pode ser hospedado na Netlify! Esse guia inclui instruções para fazer o deploy na Netlify atráves da interface do site ou da CLI da Netlify. diff --git a/src/i18n/pt-br/nav.ts b/src/i18n/pt-br/nav.ts index 469841e3a338d..42ae83011bada 100644 --- a/src/i18n/pt-br/nav.ts +++ b/src/i18n/pt-br/nav.ts @@ -29,6 +29,7 @@ export default NavDictionary({ examples: 'Receitas', 'guides/migrate-to-astro': 'Migre para o Astro', 'guides/cms': 'Conecte um CMS', + 'guides/backend': 'Adicione serviços de backend', 'guides/integrations-guide': 'Adicione integrações', 'guides/deploy': 'Faça deploy do seu site', 'guides/recipes': 'Mais Receitas', From 606ba9647dd529847a6cb44a4975c23262909b88 Mon Sep 17 00:00:00 2001 From: Waxer59 <78129249+Waxer59@users.noreply.github.com> Date: Thu, 11 May 2023 19:06:28 +0200 Subject: [PATCH 04/27] i18n(es): Translated `middleware-no-data-or-next-called.mdx` (#3209) * fix Since component * remove last changes * translate page * Update src/content/docs/es/reference/errors/middleware-no-data-or-next-called.mdx Co-authored-by: Paul Valladares <85648028+dreyfus92@users.noreply.github.com> --------- Co-authored-by: Paul Valladares <85648028+dreyfus92@users.noreply.github.com> Co-authored-by: Yan Thomas <61414485+Yan-Thomas@users.noreply.github.com> --- .../middleware-no-data-or-next-called.mdx | 21 +++++++++++++++++++ 1 file changed, 21 insertions(+) create mode 100644 src/content/docs/es/reference/errors/middleware-no-data-or-next-called.mdx diff --git a/src/content/docs/es/reference/errors/middleware-no-data-or-next-called.mdx b/src/content/docs/es/reference/errors/middleware-no-data-or-next-called.mdx new file mode 100644 index 0000000000000..bdbec8f3b947c --- /dev/null +++ b/src/content/docs/es/reference/errors/middleware-no-data-or-next-called.mdx @@ -0,0 +1,21 @@ +--- +title: The middleware didn't return a response or call next +i18nReady: true +githubURL: https://github.com/withastro/astro/blob/main/packages/astro/src/core/errors/errors-data.ts +--- + +> **MiddlewareNoDataOrNextCalled**: El middleware debe devolver un objeto `Response` o llamar a la función `next`. (E03031) + +## ¿Qué salió mal? +Se produce un error cuando el middleware no devuelve ningún dato ni llama a la función `next`. + +Por ejemplo: +```ts +import {defineMiddleware} from "astro/middleware"; +export const onRequest = defineMiddleware((context, _) => { + // no regresa nada o llama `next + context.locals.someData = false; +}); +``` + + From 7c98a97511ce2234c9e965ad2e4a9d0f2f1dcd07 Mon Sep 17 00:00:00 2001 From: Paul Valladares <85648028+dreyfus92@users.noreply.github.com> Date: Thu, 11 May 2023 11:40:33 -0600 Subject: [PATCH 05/27] i18n(es): Translated `from-nuxtjs.mdx` (#3171) * first part of translation draft * add: translation pt.2 * applied suggestions * Fix broken link * Fix more broken links --------- Co-authored-by: Waxer59 Co-authored-by: Yan Thomas <61414485+Yan-Thomas@users.noreply.github.com> --- .../guides/migrate-to-astro/from-nuxtjs.mdx | 701 ++++++++++++++++++ 1 file changed, 701 insertions(+) create mode 100644 src/content/docs/es/guides/migrate-to-astro/from-nuxtjs.mdx diff --git a/src/content/docs/es/guides/migrate-to-astro/from-nuxtjs.mdx b/src/content/docs/es/guides/migrate-to-astro/from-nuxtjs.mdx new file mode 100644 index 0000000000000..6da0eecd8fddb --- /dev/null +++ b/src/content/docs/es/guides/migrate-to-astro/from-nuxtjs.mdx @@ -0,0 +1,701 @@ +--- +title: Migrando desde NuxtJS +description: Consejos para migrar un proyecto existente de NuxtJS a Astro +type: migration +stub: false +framework: NuxtJS +i18nReady: true +--- +import AstroVueTabs from '~/components/tabs/AstroVueTabs.astro' +import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' +import FileTree from '~/components/FileTree.astro' + +Aquí hay algunos conceptos clave y estragias de migración para ayudarte a comenzar. ¡Usa el resto de nuestra documentación y nuestra [comunidad de Discord](https://astro.build/chat) para continuar! + +> Esta guía se refiere a [Nuxt 2](https://nuxtjs.org/), no a la nueva versión Nuxt 3. Si bien algunos de los conceptos son similares, Nuxt 3 es una versión más nueva del framework y puede requerir estrategias diferentes para partes de tu migración. + +## Principales similitudes entre Nuxt y Astro + +Nuxt y Astro comparten algunas similitudes que te ayudarán a migrar tu proyecto: + +- Los proyectos de Astro también pueden ser SSG o [SSR con prerenderizado a nivel de página](/es/guides/server-side-rendering/#renderizado-híbrido). +- Astro usa un enrutamiento basado en archivos y [permite que las páginas con nombres creen rutas dinámicas](/es/core-concepts/routing/#rutas-dinámicas) +- Astro es [basado en componentes](/es/core-concepts/astro-components/) y la estructura de tu marcado será similar antes y después de tu migración. +- Astro tiene [una integración oficial para usar componentes de Vue](/es/guides/integrations-guide/vue/). +- Astro tiene soporte para [instalar paquetes de NPM](/es/guides/imports/#paquetes-npm), incluyendo librerías de Vue. Puedes mantener algunos o todos tus componentes y dependencias de Vue existentes. + +## Principales diferencias entre Nuxt y Astro + +Cuando reconstruyas tu sitio Nuxt en Astro, notarás algunas diferencias importantes: + +- [MPA vs SPA](/es/concepts/mpa-vs-spa/): Nuxt es una SPA basada en Vue (aplicación de una sola página). Los sitios de Astro son aplicaciones multipágina construidas usando componentes `.astro`, pero también pueden admitir React, Preact, Vue.js, Svelte, SolidJS, AlpineJS, Lit y plantillas HTML sin procesar. + +- [Enrutamiento de Página](/es/core-concepts/astro-pages/#enrutamiento-basado-en-archivos): Nuxt usa `vue-router` para el enrutamiento SPA, y `vue-meta` para administrar ``. En Astro, crearás rutas de página HTML separadas y controlarás tu `` directamente o en un componente plantilla. + +- [Enfocado a contenido](/es/concepts/why-astro/): Astro fue diseñado para sobresalir en hacer sitios enfocados en el contenido. Mientras Nuxt puede hacer sitios enfocados en el contenido a través de `@nuxt/content`, una aplicación Nuxt existente puede estar construida para una alta interactividad del lado del cliente. Astro tiene capacidades integradas para trabajar con tu contenido, como la generación de páginas, pero puede ser difícil replicar elementos con un estado compartido complejo, como los paneles, usando componentes `.astro`. + +## Migrar tu proyecto de NuxtJS + +Cada migración de proyecto se verá diferente, pero hay algunas acciones comunes que realizarás al convertir de Nuxt a Astro. + +### Crea un nuevo proyecto Astro +Utiliza el comando `create astro` en tu gestor de paquetes para lanzar el asistente de linea de comandos de Astro o elige un tema de la comunidad del [catálogo de temas de Astro](https://astro.build/themes). + + + + ```shell + # lanzar el Asistente de línea de comandos de Astro + npm create astro@latest + ``` + + + ```shell + # lanzar el Asistente de línea de comandos de Astro + pnpm create astro@latest + ``` + + + ```shell + # lanzar el Asistente de línea de comandos de Astro + yarn create astro@latest + ``` + + + +Puedes pasar un argumento `--template` al comando `create astro` para iniciar un nuevo proyecto Astro con uno de nuestros ejemplos oficiales (por ejemplo, `docs`, `blog`, `portfolio`). O, puedes [iniciar un nuevo proyecto desde cualquier repositorio Astro existente en GitHub](/es/install/auto/#plantillas-de-inicio). + + + + ```shell + # lanzar el Asistente de línea de comandos de Astro + npm create astro@latest + + # crear un nuevo proyecto con un ejemplo oficial + npm create astro@latest -- --template + ``` + + + ```shell + # lanzar el Asistente de línea de comandos de Astro + pnpm create astro@latest + + # crear un nuevo proyecto con un ejemplo oficial + pnpm create astro@latest --template + ``` + + + ```shell + # lanzar el Asistente de línea de comandos de Astro + yarn create astro@latest + + # crear un nuevo proyecto con un ejemplo oficial + yarn create astro@latest --template + ``` + + + +Luego, copia tus archivos de proyecto Nuxt existentes a tu nuevo proyecto Astro en una carpeta separada fuera de `src`. + +:::tip +Visita https://astro.new para ver la lista completa de plantillas de inicio oficiales y enlaces para abrir un nuevo proyecto en StackBlitz, CodeSandbox o Gitpod. +::: + +### Instalar integraciones (opcional) + +Puede resultarte útil instalar algunas de las [integraciones opcionales de Astro](/es/guides/integrations-guide/) para usar mientras estes migrando tu proyecto de Nuxt a Astro: + +- **@astrojs/vue**: para reutilizar algunos componentes de interfaz de usuario Vue existentes en tu nuevo sitio Astro, o seguir escribiendo con componentes Vue. + +- **@astrojs/image**: para reemplazar el plugin de imagen de Nuxt con los propios componentes de optimización de imagen de Astro. + +- **@astrojs/mdx**: para traer archivos MDX existentes de tu proyecto Nuxt, o para usar MDX en tu nuevo sitio Astro. + +### Coloca tu código fuente en `src` + +1. **Mueve** el contenido de la carpeta `static/` de Nuxt a `public/`. + + Astro usa el directorio `public/` para los activos estáticos, similar a la carpeta `static/` de Nuxt. + +2. **Copia o mueve** los otros archivos y carpetas de Nuxt (por ejemplo, `pages`, `layouts`, etc.) a la carpeta `src/` de Astro. + + Como Nuxt, la carpeta `src/pages/` de Astro es una carpeta especial utilizada para el enrutamiento basado en archivos. Todas las demás carpetas son opcionales, y puedes organizar el contenido de tu carpeta `src/` de la forma que desees. Otras carpetas comunes en los proyectos Astro incluyen `src/layouts/`, `src/components`, `src/styles`, `src/scripts`. + +### Convertir páginas Vue SFC a archivos `.astro` + +Aqui hay algunos consejos para convertir un componente `.vue` de Nuxt en un componente `.astro`: + +1. Usa la etiqueta `