Copiar componentes Vue.js a Nuxt con SSR

La integración de Vue.js en Nuxt con server side rendering es directa: se reutilizan los mismos components, la sintaxis de ECMAScript 2015 y los estilos. Aquí verás cómo copiar cabecera y pie, configurar layouts, crear rutas automáticas en pages, consumir servicios con Trae y resolver datos asincrónicos con asyncData, además de personalizar el head.

¿Cómo integrar componentes de Vue.js en Nuxt con SSR?

Trabajar en Nuxt significa respetar su estructura: carpetas como components, layouts y pages. La estrategia es copiar piezas del proyecto tradicional y pegarlas en la estructura de Nuxt, ajustando mínimos detalles.

• Diferencia clave: components se reutilizan; pages generan rutas automáticamente.
• Crea header.vue y Footer.vue en components. Quita lógica que no uses (por ejemplo, el reproductor). Mantén el HTML simple.
• Importa los componentes en layouts/default.vue y úsalos como master page (plantilla base) para todas las vistas.
• Nuxt provee alias por carpeta; para components usa el símbolo cercano a la tecla Escape. Ejemplo con import usando alias.
• Si los estilos no se ven, elimina estilos por defecto de default.vue e index.vue y recuerda que falta Bulma.

Ejemplo de layout base:

<template>
  <div>
    <PMHeader />
    <nuxt />
    <PMFooter />
  </div>
</template>

<script>
import PMHeader from '~/components/header.vue'
import PMFooter from '~/components/footer.vue'

export default {
  components: { PMHeader, PMFooter }
}
</script>

¿Qué dependencias y estilos configurar?

• Instala cargadores de estilos: npm i -D pack-loader pack sass-loader.
• Atiende la advertencia de unmet peer dependency instalando npm i -D node-sass.
• Integra Bulma más adelante: con un solo import verás clases y estilos aplicados.

¿Cómo crear rutas en Nuxt con pages y parámetros dinámicos?

Nuxt genera rutas a partir de pages. Crear about.vue basta para tener /about; no configuras Vue Router manualmente. Los mismos router-link funcionan porque Nuxt usa Vue Router internamente.

• Crea pages/about.vue con estructura mínima y un título.

<template>
  <section class="container">
    <h1 class="title">Nosotros</h1>
  </section>
</template>

• Para rutas dinámicas, usa guion bajo. Crea pages/track/_id.vue para mapear /track/:id. El guion bajo marca el parámetro dinámico.
• Reutiliza servicios JavaScript en plugins: crea plugins/config.js, plugins/platziMusic.js y plugins/track.js copiando el código original. Accede con el alias de plugins cuando importes.
• Instala Trae para HTTP: npm i -S Trae.

Ejemplo mínimo de página con parámetro dinámico y datos remotos:

<template>
  <section class="container">
    <h1 class="title">{{ track.name }}</h1>
  </section>
</template>

<script>
import trackService from '~/plugins/track'

export default {
  asyncData({ params }) {
    return trackService.getById(params.id)
      .then(track => ({ track }))
  },
  data() {
    return { track: {} }
  }
}
</script>

• Error común al migrar: acceder a this.params en asyncData. Debe ser params del argumento de la función, no del view model.

¿Cómo se comporta la navegación con SSR y el cliente?

• La primera carga se compila y sirve en el servidor.
• A partir de ahí, la navegación es del lado del cliente (client-side): en Network verás un solo document mientras cambias de ruta.
• La barra de progreso visual indica compilación y transición en el cliente.

¿Cómo cargar datos asincrónicos y actualizar el head?

Usar created en SSR no garantiza que la petición termine antes del render. Nuxt resuelve esto con asyncData, que permite devolver una Promise cuyos valores se acoplan a data y mantienen el data binding aunque el render sea en el servidor.

• Reemplaza created por asyncData({ params }).
• Devuelve un objeto que coincida con las propiedades de data.
• Mantén el servicio HTTP con Trae y la API Fetch por debajo.

Actualizar metadatos es directo con el hook head. Puedes cambiar el título para SEO y UX, por ejemplo con el nombre de la canción.

export default {
  // ...asyncData y data...
  head() {
    return {
      title: this.track.name
    }
  }
}

¿Qué errores comunes evitar?

• Usar this dentro de asyncData: recibe params por argumento.
• Ignorar las dependencias de estilos: instala node-sass para que sass-loader funcione.
• Olvidar limpiar estilos por defecto del template de Nuxt si interfieren con tu CSS.
• No importar Bulma: sin ese import no verás las clases aplicadas.

¿Te animas a completar la app? Comenta qué parte quieres profundizar: search, reproductor o configuración de estilos.