actualmente la version de Nuxt.js es la 2.11.x y el comando de instalacion es.
npx create-nuxt-app <project-name>```
Introducción
Bienvenidos al Curso Profesional de VueJS
Introducción a VueJS
CLI y Dev Tools
Herramientas y Experiencia de Desarrollo + Archivos .vue
CLI - Hello World
Webpack
Babel
Eslint
SASS y BULMA
PUG
Ejercicio de SASS y PUG
Ejercicio Avanzado de Pug y SASS
Manipulación del DOM
Expresiones
Directivas
Data Binding
Computed properties
Watchers
Eventos
Integración a Platzi Music
Ejercicio de Manipulación del DOM
REST y HTTP
Servicios
Fetch API & Trae
Consumir API's REST
Sistema de Componentes
Component
Creación de componentes
Reactividad
Ciclo de vida
Comunicación entre componentes padres e hijos
Comunicación de hijos hacia padres
Utilización de Slots
Comunicacion entre Componentes Genericos - Event Bus y Plugins
Vue Router
Introducción a Vue Router
Instalar vue-router y configurar router view
Crear y Navegar Rutas con router-link
Extendiendo VueJS
Modifiers
Filtros
Directivas Personalizadas
Mixins
Clases, Animaciones y Transiciones36
Vue Transitions y Animaciones de CSS
Vuex
Estado Centralizado, Flux y Vuex
State
Mutations
Getters
Actions
Integración a Platzi Music
Nuxt.js
Server Side Rendering
Nuxt.js
Conceptos Básicos de Nuxt
Deploy a Producción con Now
Qué es now
Configuración de now y deploy
Conclusiones
Cierre del curso
Bonus
Internacionalización con vue-i18n
Unit Test Karma - Mocha & Webpack
Implementación de Autenticación de Usuarios en Vue usando JWT
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Nuxt.js
46/53Recursos
¿Qué es Nact JS y cómo funciona?
Nact JS es un framework similar a Next.js, pero diseñado para Vue.js, creado para facilitar el server-side rendering (SSR). A través de node y herramientas como Babel y Webpack, Nact JS se convierte en una solución potente para aplicaciones Vue.js que requieren prerenderizado. Como es común con los frameworks modernos, Nact JS combina funcionalidades de Vue.js, como VueRouter y Vuex, permitiendo una experiencia enriquecida.
¿Cuáles son las características principales de Nact JS?
Algunas de las características más destacadas de Nact JS incluyen:
- Integración con Node.js: Para manejar el server-side rendering.
- Compatibilidad con Babel y Webpack: Se utilizan internamente para una experiencia de desarrollo enriquecida.
- Funcionalidades integradas: Incluye VueRouter y Vuex, entre otros, para simplificar el desarrollo.
- Fácil instalación con npm: Vue CLI ofrece plantillas para facilitar la creación de proyectos con Nact.
¿Cómo instalar y configurar un proyecto con Nact JS?
La instalación de Nact JS es sencilla si ya tienes el CLI de Vue instalado. Simplemente utiliza el comando vue init para iniciar un nuevo proyecto con el template de Nact:
vue init nuxt/starter nombre-del-proyecto
Este comando generará una nueva estructura de proyecto lista para comenzar. Durante la configuración inicial, se te solicitará información básica como el nombre del proyecto y el autor.
Estructura de carpetas y archivos en Nact JS
La estructura de directorios y archivos que proporciona Nact JS es diferente a la del web tradicional. La organización del proyecto permite un desarrollo más ordenado y eficiente.
¿Qué directorios incluye un proyecto de Nact JS?
- Assets: Para archivos estáticos como CSS, JS, SAS y imágenes.
- Components: Contiene componentes reutilizables definidos como archivos
.vue. - Layouts: Define componentes de tipo layout, como headers y footers.
- Middleware: Ejecuta código automáticamente antes de renderizar páginas.
- Pages: El más importante, define las páginas de la aplicación como componentes
.vue. - Plugins: Para código JavaScript específico del proyecto.
- Static: Archivos estáticos adicionales, como el
favicon. - Store: Definiciones de Vuex para stores centrales de la aplicación.
¿Cuáles son los archivos esenciales en un proyecto de Nact JS?
- Nax.config.js: Sustituye a Webpack para toda la configuración del proyecto.
- Package.json: Información del proyecto, scripts como
nux,nux build, etc.
Inicio de un servidor y desarrollo con Nact JS
Para desarrollar y levantar el servidor de una aplicación creada con Nact, simplemente ejecuta:
npm run dev
Este comando ejecuta un servidor local, típicamente en localhost:3000, y monitorea cambios en el código durante el desarrollo.
¿Cómo se gestionan las rutas y componentes en Nact JS?
Las rutas se generan automáticamente basándose en la estructura de archivos dentro del directorio pages. Los nombres de los archivos en este directorio corresponderán a las rutas de URL, facilitando el enrutamiento automático con VueRouter integrado.
¿Cómo personalizo mi aplicación con Nact JS?
- Nax.config.js: Personaliza configuraciones como metadata del HTML, el color de la barra de carga, scripts adicionales, entre otros.
- Layouts y Components: Implementa tus propios diseños y componentes reutilizables.
Nact JS ofrece una experiencia robusta para aquellos familiarizados con Vue que necesitan capacidades de SSR, manteniendo una flexibilidad alta y un enfoque sencillo para el desarrollo de aplicaciones modernas. Con esta base, los desarrolladores pueden profundizar en sus necesidades y aprovechar todo el potencial que ofrece el framework.
Aportes 10
Preguntas 2
Ordenar por:
Si alguno acá necesita cambiar el host y el port donde esta escuchando el proyecto, lo pueden hacer muy fácilmente desde su package.json
Ejemplo:
"dev": "nuxt --hostname 172.17.0.2 --port 82",
me da este error al ejecutar npm run dev con nuxt intento instalar el nuxt/webpack pero sigue el error
FATAL Module @nuxt/webpack not found.
Please install missing dependency:
Using npm: npm i @nuxt/webpack
Using yarn: yarn add @nuxt/webpack
╭─────────────────────────────────────╮
│ │
│ ✖ Nuxt Fatal Error │
│ │
│ Module @nuxt/webpack not found. │
│ │
│ │
│ │
╰─────────────────────────────────────╯
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! vuenuxt@1.0.0 dev: `nuxt`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the vuenuxt@1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\codework\AppData\Roaming\npm-cache\_logs\2019-03-05T13_59_44_706Z-debug.log
Uhhh:0 Me gustó Nuxt xD en la versión actual te hacen más preguntas, me encanta que Vue DevTools detecta Nuxt, aunque aún me raya el hecho de tener que cambiar el modo de trabajo con Vue a como lo veniamos haciendo.
¿Pero prácticamente Nuxt es como un Laravel no? Donde ya te da la estructura de carpetas y así
no puedo usar pug, marca error al intentar usar lang=“pug”
Esta fue mi configuracion para la creación del proyecto en Nuxt:
a fecha de hoy es una ofensa ver esto, este curso necesita una actualizacion, me duele el bolsillo haber pagado Platzi, Nuxt es de las mejores cosas que hay para Vue, aca solo dicen que Nuxt es dificil, cuando hace mucho mas facil manejar Vuejs
Si alguien más tuvo el siguiente error:
Module build failed (from ./node_modules/eslint-loader/index.js)
Lo arreglé añadiendo en el nuxt.config.js lo siguiente:
extend (config, { isDev }) {
if (isDev && process.client) {
config.module.rules.push({
enforce: 'pre',
test: /\.(js|vue)$/,
loader: 'eslint-loader',
exclude: /(node_modules)/
})
}
}
Estando dentro de la carpeta del proyecto, para abrir el editor de código:
Visual Studio Code: code .
Atom: aton .
Suena excelente!! Veamos qué más viene!!
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?