Nuxt3

Este es un resumen de la documentación oficial de Nuxt3. Aquí encontrarás los conceptos clave que necesitas saber para empezar a trabajar con Nuxt3.

Auto-imports

Nuxt3 importa automáticamente todo lo que esté dentro de la carpeta components, composables y utils en el directorio raíz de tu proyecto.

Vue.js Development

Single File Components (SFC)

Los componentes de Vue se pueden escribir en un solo archivo .vue que contenga el HTML, CSS y JavaScript del componente.

<script setup>
const title = "Hello, World!";
</script>
<template>
  <div>
    <h1>{{ title }}</h1>
  </div>
</template>
<style scoped>
h1 {
  color: red;
}
</style>

Nuxt modules

Los módulos de Nuxt son una forma de extender la funcionalidad de Nuxt. Pueden ser módulos de terceros o módulos personalizados.

TypeScript

Por defecto Nuxt no comprueba los types por razones de rendimiento. Para ello necesitamos instalar vue-tsc y typescript

npm install --save-dev vue-tsc typescript

Para lanzarlo, usar el comando. Este comando está automatizado y controlado por husky al hacer un commit. Pero puedes lanzarlo en cualquier momento desde tu terminal, para comprobar los types.

npx nuxi typecheck

Estructura de directorios

Carpeta `.nuxt`

Nuxt usa la carpeta .nuxt en desarrollo para almacenar los archivos generados.

Carpeta `.output`

Nuxt usa la carpeta .output cuando se hace un build, para almacenar los archivos generados para producción.

Carpeta `assets`

La carpeta assets contiene archivos que se compilarán y se incluirán en el bundle de la aplicación.

Imágenes que no se servirán desde el directorio public
Fuentes
Hojas de estilos (CSS, SCSS, etc.)

Carpeta `components`

Los componentes se pueden importar directamente en cualquier archivo .vue sin necesidad de importarlos manualmente.

Bajo este ejemplo:

Directorycomponents
- Directoryui
  - AppFooter.vue

Si queremos autoimportar tendremos que hacer lo siguiente:

<template>
  <UiAppFooter />
</template>

Solamente hay que seguir la ruta del componente, en este caso UiAppFooter. (nunca hay que poner la extensión del archivo)

Carpeta `composables`

Los componibles se pueden importar directamente en cualquier archivo .vue sin necesidad de importarlos manualmente.

Puedes usar la auto importación en archivos .vue, .js y .ts.

<script setup>
const foo = useFoo();
</script>

<template>
  <div>
    {{ foo }}
  </div>
</template>

Si se necesitas tener una estructura de subdirectorios dentro de composables, se puede hacer uso de un archivo index.js que exporte todos los composables. composables/index.js;

Carpeta `layouts`

Los layouts son plantillas que se pueden utilizar en las páginas de tu aplicación.

Los layouts se activan añadiendo <NuxtLayout> en tu app.vue

<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

Para usar un layout:

<NuxtLayout :name="'base-card'" v-bind="packLayout" image-height="22.5">
  <section class="container"></section>
</NuxtLayout>

Se recomienda seguir el siguiente estandard para los nombres de los layouts:

~/layouts/desktop/DesktopDefault.vue —> desktop-default

~/layouts/desktop-base/DesktopBase.vue —> desktop-base

~/layouts/desktop/Desktop.vue —> desktop

Carpeta `middleware`

Los middlewares son funciones que se ejecutan antes de cargar una página o un grupo de páginas.

De forma predeterminada, el middleware global se ejecuta alfabéticamente según el nombre del archivo.

Sin embargo, puede haber ocasiones en las que desee definir un orden específico. Por ejemplo, en el último escenario, setup.global.ts es posible que deba ejecutarse antes de analytics.global.ts. En ese caso, recomendamos anteponer al middleware global una numeración “alfabética”.

Directorymiddleware
- 01.setup.global.ts
- 02.analytics.global.ts
- auth.ts

Carpeta `modules`

Los módulos de Nuxt son una forma de extender la funcionalidad de Nuxt. Pueden ser módulos de terceros o módulos personalizados.

Carpeta `pages`

Las páginas son componentes Vue que se utilizan para definir las rutas de la aplicación.

Nuxt permite tener rutas dinámicas, por ejemplo:

Directorypages
- index.vue
- Directoryusers-[group]
  - [id].vue

Según el ejemplo anterior, puedes acceder a la página users-[group]/[id].vue con el objeto $route

<template>
  <p>{{ $route.params.group }} - {{ $route.params.id }}</p>
</template>

Si quieres acceder a la ruta usando el Composition API, puedes hacerlo de la siguiente manera:

<script setup lang="ts">
const route = useRoute();

if (route.params.group === "admins" && !route.params.id) {
  console.log("Warning! Make sure user is authenticated!");
}
</script>

Carpeta `plugins`

Los plugins de Nuxt son archivos JavaScript que se ejecutan en la creación de la aplicación.

Nuxt carga automáticamente los archivos de la carpeta plugins y los ejecuta en el orden en que se encuentran.

Si quieres usar un plugin antes que otro, recuerda usar el prefixing with alphabetical, el ejemplo está en la sección middleware, utilizar el nombre de 01.plugin.js, 02.plugin.js, etc.

Carpeta `public`

La carpeta public contiene archivos estáticos que se servirán directamente al navegador.

Carpeta `utils`

El propósito de la carpeta utils es almacenar funciones y utilidades que se pueden reutilizar en todo el proyecto.

export function dateFormat(date: `${string}-${string}-${string}`) {
  const [year, month, day] = date.split("-");
  return `${day}/${month}/${year}`;
}

Ahora se puede utilizar de forma automática en cualquier archivo .vue, .js o .ts.

<template>
  <div>
    {{ dateFormat("2022-12-03") }}
  </div>
</template>

Componentes de Nuxt

`<DevOnly />`

Este componente solo se renderiza en entornos de desarrollo. Es útil para mostrar componentes de depuración o información de desarrollo.

<template>
  <div>
    <Sidebar />
    <DevOnly>
      <!-- this component will only be rendered during development -->
      <LazyDebugBar />

      <!-- if you ever require to have a replacement during production -->
      <!-- be sure to test these using `nuxt preview` -->
      <template #fallback>
        <div><!-- empty div for flex.justify-between --></div>
      </template>
    </DevOnly>
  </div>
</template>

`<NuxtLayout />`

Este componente activa el layout por defecto.

<template>
  <NuxtLayout> some page content </NuxtLayout>
</template>

Props

name - Nombre del layout específico, tiene que coincidir con el nombre del archivo que hay en el directorio /layouts, el nombre del layout se escribe en kebab-case.

<template>
  <NuxtLayout name="layout">
    <NuxtPage />
  </NuxtLayout>
</template>

Props personalizados

NuxtLayout también acepta custom props que se pueden pasar al layout. Que son accesibles a modo de atributos.

<template>
  <div>
    <NuxtLayout name="custom" title="I am a custom layout">
      <-- ... -->
    </NuxtLayout>
  </div>
</template>

En el ejemplo anterior el valor title es accesible usando useAttrs en el layout.

<script setup lang="ts">
const layoutCustomProps = useAttrs();

console.log(layoutCustomProps.title); // I am a custom layout
</script>

Transitions

Para que las transiciones funcionen correctamente en los layouts, se recomienda que el NuxtLayout no sea el elemento raíz del componente.

pages/index.vue
layouts/custom.vue

  <template>
    <div>
      <NuxtLayout name="custom">
        <template #header> Some header template content. </template>
      </NuxtLayout>
    </div>
  </template>

  <template>
    <div>
      <!-- named slot -->
      <slot name="header" />
      <slot />
    </div>
  </template>

`<NuxtLink />`

NuxtLink es un componente que se utiliza para navegar entre páginas de la aplicación.

Enrutamiento interno

<template>
  <NuxtLink to="/about"> About page </NuxtLink>
  <!-- <a href="/about">...</a> (+Vue Router & prefetching) -->
</template>

Pasar parámetros

En este ejemplo se está pasando un parámetro id para vincular la ruta ~/pages/posts/[id].vue

<template>
  <NuxtLink :to="{ name: 'posts-id', params: { id: 123 } }">
    Post 123
  </NuxtLink>
</template>

Como manejar errores 404

Cuando se usa <NuxtLink /> para archivos del directorio /public o una aplicación diferente en el mismo dominio, se debe usar la propiedad external.

Al usar external, fuerzas que el enlace se represente con un <a> en lugar de un <RouterLink> de Vue.

<template>
  <NuxtLink to="/the-important-report.pdf" external> Download Report </NuxtLink>
  <!-- <a href="/the-important-report.pdf"></a> -->
</template>

`<NuxtImg />`

NuxtImg es un componente que se utiliza para cargar imágenes de forma optimizada.

<NuxtImg src="/nuxt-icon.png" />

`<NuxtPicture />`

NuxtPicture es un componente que se utiliza para cargar imágenes de forma optimizada con soporte para srcset.

Composables de Nuxt

`useError`

useError es un composable que se utiliza para manejar errores en la aplicación.

const error = useError();

Propiedades de `useError`

interface {
  //  HTTP response status code
  statusCode: number
  // HTTP response status message
  statusMessage: string
  // Error message
  message: string
}

`useFetch`

useFetch es un composable que se utiliza para realizar peticiones HTTP.

Ejemplo de uso

<script setup lang="ts">
const { data, status, error, refresh, clear } = await useFetch('/api/modules', {
  pick: ['title']
})
</script>

Nuxt3

Auto-imports

Vue.js Development

Single File Components (SFC)

Nuxt modules

TypeScript

Estructura de directorios

Carpeta .nuxt

Carpeta .output

Carpeta assets

Carpeta components

Carpeta composables

Carpeta layouts

Carpeta middleware

Carpeta modules

Carpeta pages

Carpeta plugins

Carpeta public

Carpeta utils