Cómo crear un proyecto con NuxtJS

Curso de Server Side Rendering con Nuxt 2

Contenido del curso

Fundamentos de NuxtJS

Rutas y Componentes con NuxtJS

Backend con Airtable y Netlify Functions

Consumo de nuestro backend con Netlify

Cierre del curso

21
Despedida del curso
02:18 min

Tomar examen

Cómo crear un proyecto con NuxtJS

 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

 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

Carlos Rodríguez

Estudiante

Hace 4 años

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

Hace 2 años

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

Luis Palomo

I thought the same!!!!

Javier Suárez Rodríguez

Hace 3 años

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

Diana Martinez

Estamos trabajando en esto.

Oriana Carolina Ailigo

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.

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

Por que me sale el siguiente error:

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.

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

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

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

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:

Santiago Velásquez Serna

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

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

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