Cómo crear un proyecto con NuxtJS

Clase 3 de 21 • Curso de Server Side Rendering con Nuxt 2

Carlos Rodríguez

student•

Como en este curso se utilizamos Nuxt V2.x no hay necesidad de utilizar la extensión Vetur para Vue.js en versiones menores a la 3. Podemos seguir usando la extensión definitiva para Vue.js 3 que es Volar pero debemos agregar una dependencia de desarrollo @volar-plugins/vetur y agregar las configuraciones que nos dice la documentación de esta dependencia. . Además en el file jsconfig.json debemos hacer match a la versión de vue para no tener problemas con la extensión:

{
  ...
  "vueCompilerOptions": {
    "target": 2.7
  }
}

Jorge Eduardo Hernández Oropeza

student•

I'm doing this course for knowing and exploring NuxtJS, but i though It should be updated now.

Luis Palomo

student•

I thought the same!!!!

Javier Suárez Rodríguez

student•

Cuando vamos a tener un Curso con Nuxt 3 y Vue 3?

Diana Martinez

student•

Estamos trabajando en esto.

Oriana Carolina Ailigo

student•

tuve un error al momento de querer ejecutar npm run dev:

✖ Nuxt Fatal Error

TypeError: Cannot destructure property 'nuxt' of 'this' as it is undefined.

Diana Martinez

student•

Hola, como compartieron en otros comentarios, al parecer es un problema con tailwind, debes desinstalarlo del proyecto y volverlo a instalar con esta guía: https://tailwindcss.com/docs/guides/nuxtjs

Leobardo Adrián Herrera

student•

Por que me sale el siguiente error:

 FATAL  Cannot destructure property 'nuxt' of 'this' as it is undefined.                                                        12:39:26

  at postcss8Module (node_modules/@nuxt/postcss8/dist/index.js:15:10)
  at installModule (node_modules/@nuxt/kit/dist/index.mjs:416:9)
  at async setup (node_modules/@nuxtjs/tailwindcss/dist/module.mjs:186:7)
  at async ModuleContainer.normalizedModule (node_modules/@nuxt/kit/dist/index.mjs:167:5)
  at async ModuleContainer.addModule (node_modules/@nuxt/core/dist/core.js:239:20)
  at async ModuleContainer.ready (node_modules/@nuxt/core/dist/core.js:51:7)
  at async Nuxt._init (node_modules/@nuxt/core/dist/core.js:478:5)


   ╭─────────────────────────────────────────────────────────────────────────────────╮
   │                                                                                 │
   │   ✖ Nuxt Fatal Error                                                            │
   │                                                                                 │
   │   TypeError: Cannot destructure property 'nuxt' of 'this' as it is undefined.   │
   │                                                                                 │
   ╰─────────────────────────────────────────────────────────────────────────────────╯

Diana Martinez

student•

Es posible que se deba a un error de caché, te recomiendo elminar la carpeta node_modules y hacer el install de nuevo, y si no tal vez funcione volver a crear el proyecto.

Diana Martinez

student•

También te recomiendo utilizar la misma versión de todo que el curso, para que sea más fácil, o si no asegurar que tienes todo actualizado.

Fabricio Orrala

student•

¿Con qué versión de NodeJS estamos usando para Nuxt2?

Diana Martinez

student•

La última versión estable debería servir, en el curso usé la v16.13

Fabricio Orrala

student•

Yo estaba usando la 16.15 y me aparecieron todos éstos warnings, pero creo que son algo críticos por ser relacionados a eslint. Me bajé a la versión 14.20 de node y ahí desaparecieron:

npm WARN ERESOLVE overriding peer dependency
npm WARN ERESOLVE overriding peer dependency
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: eslint-config-standard@16.0.3
npm WARN Found: eslint@8.24.0
npm WARN node_modules/eslint
npm WARN   dev eslint@"^8.4.1" from the root project
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: eslint-config-standard@16.0.3
npm WARN Found: eslint@8.24.0
npm WARN node_modules/eslint
npm WARN   dev eslint@"^8.4.1" from the root project
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: eslint-config-standard@16.0.3
npm WARN Found: eslint@8.24.0
npm WARN node_modules/eslint
npm WARN   dev eslint@"^8.4.1" from the root project
npm WARN   17 more (@babel/eslint-parser, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer eslint@"^7.12.1" from eslint-config-standard@16.0.3
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: eslint-config-standard@16.0.3
npm WARN Found: eslint@8.24.0
npm WARN node_modules/eslint
npm WARN   dev eslint@"^8.4.1" from the root project
npm WARN   17 more (@babel/eslint-parser, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer eslint@"^7.12.1" from eslint-config-standard@16.0.3
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: eslint-config-standard@16.0.3
npm WARN Found: eslint@8.24.0
npm WARN node_modules/eslint
npm WARN   dev eslint@"^8.4.1" from the root project
npm WARN   17 more (@babel/eslint-parser, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer eslint@"^7.12.1" from eslint-config-standard@16.0.3
npm WARN node_modules/eslint-config-standard
npm WARN   eslint-config-standard@"^16.0.3" from @nuxtjs/eslint-config@8.0.0
npm WARN   node_modules/@nuxtjs/eslint-config
npm WARN
npm WARN Conflicting peer dependency: eslint@7.32.0
npm WARN node_modules/eslint
npm WARN   peer eslint@"^7.12.1" from eslint-config-standard@16.0.3
npm WARN   node_modules/eslint-config-standard
npm WARN     eslint-config-standard@"^16.0.3" from @nuxtjs/eslint-config@8.0.0
npm WARN     node_modules/@nuxtjs/eslint-config
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: eslint-plugin-promise@5.2.0
npm WARN Found: eslint@8.24.0
npm WARN node_modules/eslint
npm WARN   dev eslint@"^8.4.1" from the root project
npm WARN   17 more (@babel/eslint-parser, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer eslint@"^7.0.0" from eslint-plugin-promise@5.2.0

Santiago Velásquez Serna

student•

Hoy 30 de octubre de 2023 me parece que ya es un poco mirar hacia atras el hacer el curso con nuxt 2 cuando estamos en la version 3.8, la configuración inicial es mucho mas limpia y no tiene tantos plugins por defecto, aparte que es mucho mas facil trabajar con Vite que con Webpack, incluso en este momento ya hay modulos como react-router que estan tambien haciendo esta sustitución. Me voy a proponer tomar el curso con la version mas actualizada.

Jovanny Ruiz

student•

En ocasiones como la mía tuve que conocer del curso porque en el proyecto en el que me encuentro todavía trabajan con nuxtjs en su version 2, y la verdad en proyectos muy grandes es mas común encontrarse en el que te verás con versiones viejas, tanto de framework, librerias, paquetes, y tood lo demás, muy raro un proyecot en el que se encuentre trabajando diariamente para su actualización , esto sería no sé si ideal pero definitivamente nos estaría quitando tiempo a los dsarrolladores para quitar bugs o implementar algun avance en el proyecto

 FATAL  Cannot destructure property 'nuxt' of 'this' as it is undefined.                                                        12:39:26

  at postcss8Module (node_modules/@nuxt/postcss8/dist/index.js:15:10)
  at installModule (node_modules/@nuxt/kit/dist/index.mjs:416:9)
  at async setup (node_modules/@nuxtjs/tailwindcss/dist/module.mjs:186:7)
  at async ModuleContainer.normalizedModule (node_modules/@nuxt/kit/dist/index.mjs:167:5)
  at async ModuleContainer.addModule (node_modules/@nuxt/core/dist/core.js:239:20)
  at async ModuleContainer.ready (node_modules/@nuxt/core/dist/core.js:51:7)
  at async Nuxt._init (node_modules/@nuxt/core/dist/core.js:478:5)


   ╭─────────────────────────────────────────────────────────────────────────────────╮
   │                                                                                 │
   │   ✖ Nuxt Fatal Error                                                            │
   │                                                                                 │
   │   TypeError: Cannot destructure property 'nuxt' of 'this' as it is undefined.   │
   │                                                                                 │
   ╰─────────────────────────────────────────────────────────────────────────────────╯

npm WARN ERESOLVE overriding peer dependency
npm WARN ERESOLVE overriding peer dependency
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: eslint-config-standard@16.0.3
npm WARN Found: eslint@8.24.0
npm WARN node_modules/eslint
npm WARN   dev eslint@"^8.4.1" from the root project
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: eslint-config-standard@16.0.3
npm WARN Found: eslint@8.24.0
npm WARN node_modules/eslint
npm WARN   dev eslint@"^8.4.1" from the root project
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: eslint-config-standard@16.0.3
npm WARN Found: eslint@8.24.0
npm WARN node_modules/eslint
npm WARN   dev eslint@"^8.4.1" from the root project
npm WARN   17 more (@babel/eslint-parser, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer eslint@"^7.12.1" from eslint-config-standard@16.0.3
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: eslint-config-standard@16.0.3
npm WARN Found: eslint@8.24.0
npm WARN node_modules/eslint
npm WARN   dev eslint@"^8.4.1" from the root project
npm WARN   17 more (@babel/eslint-parser, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer eslint@"^7.12.1" from eslint-config-standard@16.0.3
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: eslint-config-standard@16.0.3
npm WARN Found: eslint@8.24.0
npm WARN node_modules/eslint
npm WARN   dev eslint@"^8.4.1" from the root project
npm WARN   17 more (@babel/eslint-parser, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer eslint@"^7.12.1" from eslint-config-standard@16.0.3
npm WARN node_modules/eslint-config-standard
npm WARN   eslint-config-standard@"^16.0.3" from @nuxtjs/eslint-config@8.0.0
npm WARN   node_modules/@nuxtjs/eslint-config
npm WARN
npm WARN Conflicting peer dependency: eslint@7.32.0
npm WARN node_modules/eslint
npm WARN   peer eslint@"^7.12.1" from eslint-config-standard@16.0.3
npm WARN   node_modules/eslint-config-standard
npm WARN     eslint-config-standard@"^16.0.3" from @nuxtjs/eslint-config@8.0.0
npm WARN     node_modules/@nuxtjs/eslint-config
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: eslint-plugin-promise@5.2.0
npm WARN Found: eslint@8.24.0
npm WARN node_modules/eslint
npm WARN   dev eslint@"^8.4.1" from the root project
npm WARN   17 more (@babel/eslint-parser, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer eslint@"^7.0.0" from eslint-plugin-promise@5.2.0

Cómo crear un proyecto con NuxtJS

Fundamentos de NuxtJS

Introducción a Nuxtjs

Características de NuxtJS

Cómo crear un proyecto con NuxtJS

Rutas y Componentes con NuxtJS

Rutas dinámicas con NuxtJS

Maquetación de vistas en nuestro proyecto

Creación del componente para las cards

Integración del intérprete de Markdown en NuxtJS

Cómo agregar SEO y meta tags en NuxtJS

Built-In Components

Backend con Airtable y Netlify Functions

Backend con Airtable

Despliegue y API con Netlify

Configuración de Netlify

Programando las funciones para Netlify

Consumo de nuestro backend con Netlify

Módulos de NuxtJS

Usando el módulo HTTP para consumir nuestro backend

Context

Consumir el API

Sistema de comentarios

Utilidades en NuxtJS

Estrategias de renderizado

Cierre del curso

Despedida del curso