A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Trabajando con el componente Laravel/UI

11/36
Recursos

Aportes 50

Preguntas 8

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

para tener el paquete de UI se debe de tener en cuenta primero que version de Larave estas usando actualmente si usas Laravel 6.x se debe de correr el comando

composer require laravel/ui:^1.0 --dev

en caso de tener Laravel 7.x entonces se debe de correr el comando:

composer require laravel/ui --dev

Todo esto esta en la documentacion de Laravel

Antes de realizar el comando npm run dev les aconsejo que utilicen npm outdate, este 煤ltimo comando analizar谩 y te dir谩 que dependencias est谩n desactualizadas, y como 煤ltimo utilizan ``npm update para actualizar dichas dependencias.

Con eso ya podr谩s empezar el proyecto desde cero con las 煤ltimas versiones de tus dependencias.

Pasos:

composer require laravel/ui --dev
  • Para estilos y autenticaci贸n
php artisan ui bootstrap --auth
  • Para compilar
npm install && npm run dev

Trabajando con el componente Laravel/UI


Este es un componente creado por Laravel para el registro y autenticaci贸n de usuarios de un sistema Web. Esta es la l铆nea de comando que utilizaremos:

composer require laravel/ui --dev

Lo vamos a instalar de forma local en el lado del desarrollo.

Para instalar el sistema de registro y login utilizamos los siguientes comando:

# instalaci贸n sin formato
php artisan ui:auth

# instalaci贸n con el sistema de vue.js
php artisan ui vue --auth

# instalaci贸n con el sistema de react.js
php artisan ui react --auth

# instalaci贸n con Bootstrap
php artisan ui bootstrap --auth

Despu茅s, de ejecutar el comando se van a crear las vistas, el c贸digo de la ruta en el archivo web y por 煤ltimo un controlador.

Para que pueda verse el bootstrap tenemos que descargar las dependencias de JS, con los siguientes comandos:

# 1er comando para instalar las dependencias
npm install

# 2do comando para ver las dependencias desactualizadas
npm outdate

# 3er comando para actualizar las dependencias 
npm update

# 4to comando para compilar los archivos de bootstrap
npm run dev

Nota:

  • Se tiene que tener instalado NodeJS, podemos hacerlo desde -> https://nodejs.org, ya viene con npm.

Si est谩n trabajando con la versi贸n 6 de laravel, para instalar laravel/ui escriben lo siguiente:

composer require laravel/ui="^1.0" --dev

Yo utilice la version 7.0 de laravel y me salio error. Lo solucione con el comando
composer require laravel/ui 鈥淾2.0鈥

composer require laravel/ui --dev
php artisan ui bootstrap --auth
se crear谩n rutas y controladores de ejemplo.
instalar NodeJs aqui en windows con next y ejecutar estos comandos en cmd modo admin.
npm install
npm outdate
npm update
npm run dev

Al crearlo con vue, solo instala vue y crea un componente listo para usarse, en si los modulos que forman parte de la autenticacion no utilizan vue.
Al hacerlo tambien por defecto me pone bootstrap

REACT JS 鉁岎煒

En mi caso no tengo instalado node.js y para darle dise帽o con bootstrap solo agregu茅 la referencia a los estilos de bootstrap en la plantilla del login que est谩 en la ruta "resources\views\layouts\app.blade.php ". los estilos los pueden sacar desde
https://getbootstrap.com/

Si has estado utilizando Laravel 7 para seguir el curso, es el momento de dejarlo, ahora si hay que empezar a usar Laravel 8, pues el paquete de composer laravel/ui ahora solo funciona en Laravel 8, si tratas de instalarlo en alguna versi贸n anterior de Laravel te dar谩 un error.

Eso si, siempre teniendo en cuenta los nuevos cambios que surgieron en Laravel 8

As铆 ha quedado resource al correr el comando

php artisan ui vue --auth

!

Les comento, yo estoy usando la version de Laravel 8 y tenia una serie de problemas. Les comparto los pasos para instalar el UI y que no les de error. Espero que les resulte util

  1. Hay que agregar el UI por medio de composer

composer require laravel/ui

  1. En mi caso utilizo Bootstrap asi que ejecutamos el siguiente comando para integrar el Bootstrap al UI

php artisan ui bootstrap --auth

  1. Instalamos NPM
    npm install

4.Ejecutamos NPM
npm run dev

**IMPORTANTE - En este momento les dara fallo por la version de SASS. Deben de ir al 鈥減ackage.json鈥 y cambiar la version de 鈥渟ass-loader鈥 a la 10. Lo demas lo dejan igual

鈥渄evDependencies鈥: {
鈥渁xios鈥: 鈥淾0.21鈥,
鈥渂ootstrap鈥: 鈥淾4.6.0鈥,
鈥渏query鈥: 鈥淾3.6鈥,
鈥渓aravel-mix鈥: 鈥淾6.0.6鈥,
鈥渓odash鈥: 鈥淾4.17.19鈥,
鈥減opper.js鈥: 鈥淾1.16.1鈥,
鈥減ostcss鈥: 鈥淾8.1.14鈥,
鈥渞esolve-url-loader鈥: 鈥淾4.0.0鈥,
鈥渟ass鈥: 鈥淾1.32.11鈥,
鈥渟ass-loader鈥: 鈥淾10鈥
}

  1. Volvemos a realizar npm install para que baje los programas
    que necesite

6.Ejecutamos npm run dev para compilar

7.Corremos el proyecto y ya tendriamos nuestra zona de login y register funcionando con sus correspondientes estilos

Para bootstrap, laravel 6
La primera vez que lo hice tuve que insertar el link de bootstrap, porque cuando compile no me arrojo la carpeta public/css, pero ya se cual fue mi error: Estoy usando la version 6 asi que es:

composer require laravel/ui:^1.0 --dev //esto es super importante

php artisan ui bootstrap --auth

npm install

npm run dev

Y es todo, despues de que termine veran que tienen las carpetas de js y css. Uso windows 10 con la terminal de git bash

Si les marca error al querer instalar el paquete de UI es porque descarga la versi贸n 2 de Laravel/ui la cual no es compatible con Laravel 6, por lo que hay que descargar la versi贸n 1 con el siguiente comanto

composer require laravel/ui="1.*" 

al usar el comando NPM RUN DEV obtendo muchos errores y no funciona que puede ser??

`> @ dev /home/vagrant/CUARSA_PROJECTS/laravelSenior

npm run development

@ development /home/vagrant/CUARSA_PROJECTS/laravelSenior
cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

sh: 1: cross-env: not found
npm ERR! code ELIFECYCLE
npm ERR! syscall spawn
npm ERR! file sh
npm ERR! errno ENOENT
npm ERR! @ development: cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the @ development script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?

npm ERR! A complete log of this run can be found in:
npm ERR! /home/vagrant/.npm/_logs/2020-09-04T16_19_46_454Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ dev: npm run development
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?

npm ERR! A complete log of this run can be found in:
npm ERR! /home/vagrant/.npm/_logs/2020-09-04T16_19_46_499Z-debug.log
`

Para la versi贸n 8.X de laravel :

1 - Instalar laravel/breeze

composer require laravel/breeze --dev

2 - Instalar el sistema de vue o react de login

php artisan breeze:install vue
 
// Or...
 
php artisan breeze:install react

3 - Compilar y ejecutar migraciones

npm install
npm run dev
php artisan migrate

c贸mo puedo hacer un login con redes sociales?

Laravel everywhere and anywhere

Si les muestra un error al instalar laravel/ui puede ser porque ya est谩 en su versi贸n 2 y solo es compatible con Laravel 7.

Prueben instalando la versi贸n 1 de laravel/ui con el siguiente comando:

composer require laravel/ui:^1.0 --dev

Actualmente se puede usar jetstream, pero es bueno ver opciones as铆 como laravel/ui para aprender m谩s sobre este gran framework

para descargar node js en windows
https://nodejs.org/es/

		Sistema log in laravel 6

Se instala el paquete de rutas de autenticaci贸n, en la zona de desarrollo

Composer require laravel/ui:^1.0 - -dev

Sistema log in laravel 7
Se instala el paquete de rutas de autenticaci贸n, en la zona de desarrollo

Composer require laravel/ui - -dev

Ha estas alturas solo tenemos el sistema de rutas, aun no emos habilitados el sistema de registro y login, para ello vamos a lo siguiente: (los siguientes comandos pueden ser usados en las dos versiones 6 y 7 de laravel)
Habilita Sistema de autenticaci贸n sin agregar estilos

php artisan ui 鈥-auth

Habilita Sistema de autenticaci贸n agregando a Bootstrap como estilos de dise帽o

php artisan ui bootstrap 鈥-auth

Habilita Sistema de autenticaci贸n agregando a react como estilos de dise帽o

php artisan ui react 鈥揳uth

Habilita Sistema de autenticaci贸n agregando a vue como estilos de dise帽o

php artisan ui vue --auth 

Para los que no les instale el paquete, si est谩n usando Laravel 6 usen el siguiente comando

composer require laravel/ui:^1.0 --dev

Hola, yo hice lo sguiente

  1. instale la version 6*,:
    composer create-project --prefer-dist laravel/laravel:^6.*

2)instale 2) instal茅 laravel ui:
composer require laravel/ui=鈥1.*鈥 鈥 dev

3)verique composer.json y veo que est谩 instalada la dependencia (en require dev)

  1. instal茅 login b谩sico de bootstrap y autentificacion con php artisan, esto crea rutas y vistas para autentificaci贸n de usuarios:
    Php artisan ui bootstrap --auth

5)Luego se instalan los estilos:
npm install (aqu铆 presente algunos mensajes de deprecated)

  1. continu茅 con npm run dev y se y todo qued贸 aparentemente bien, ,me falta hacer pruebas de registro pero visualmente los estilos quedaron correctos.

Comparto los mensajes de error porque me qued茅 con la duda:

  1. Ejecut茅 el comando npm outdate y esto fue lo que me sali贸, interesante porque compara las versiones de las dependencias:
  1. luego ejecut茅 npm update, pero me gener贸 errores, y nmpm audit tambi茅n, relacionados con el mismo mensaje deprecated.

Como les digo todo al final me funcion贸 pero me hubiuera gustado saber que hacer para corregir estos errores, vi por ahi en npm audit que hay una opci贸n de fuerza bruta pero no estoy muy relacionado aun con este comando.

Que opinan compas鈥 alguna opcion para ajustar estos errores o me podria generar inconvenientes en alguna funcion?

cuando escribo npm install me sale lo siguiente:

npm WARN deprecated [email protected]1.16.1: You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1
loadDevDep:sass-loader    鈻 鈺⑩枅鈻堚枅鈻堚枅鈻堚枅鈻堚枅鈻堚枅鈻堚枅鈻堚枅鈻堚枅鈻堚枅鈻堚枅鈻堚枅鈻堚枅鈻堚枅鈻堚枅鈻堚枅鈻堚枅鈻戔枒鈻戔枒鈻戔枒鈻戔枒鈻戔枒鈻戔枒鈻戔枒鈻戔枒鈻戔枒鈻戔枒鈻戔枒鈻戔枒鈻戔枒鈻戔枒鈻戔枒鈻戔枒鈻戔枒鈻戔枒鈻戔枒鈻戔枒鈻戔枒鈻戔枒鈻戔枒鈻戔枒鈻戔枒鈻戔枒鈻戔枒鈻戔枒鈻戔枒鈻戔枒鈻戔枒鈻戔枒鈻戔枒鈻戔枒鈻戔暉
npm WARN deprecated [email protected]2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm ERR! Linux 4.15.0-117-generic
npm ERR! argv "/usr/bin/node" "/usr/bin/npm" "install"
npm ERR! node v8.10.0
npm ERR! npm  v3.5.2
npm ERR! code EMISSINGARG

npm ERR! typeerror Error: Missing required argument #1
npm ERR! typeerror     at andLogAndFinish (/usr/share/npm/lib/fetch-package-metadata.js:31:3)
npm ERR! typeerror     at fetchPackageMetadata (/usr/share/npm/lib/fetch-package-metadata.js:51:22)
npm ERR! typeerror     at resolveWithNewModule (/usr/share/npm/lib/install/deps.js:456:12)
npm ERR! typeerror     at /usr/share/npm/lib/install/deps.js:457:7
npm ERR! typeerror     at /usr/share/npm/node_modules/iferr/index.js:13:50
npm ERR! typeerror     at /usr/share/npm/lib/fetch-package-metadata.js:37:12
npm ERR! typeerror     at addRequestedAndFinish (/usr/share/npm/lib/fetch-package-metadata.js:82:5)
npm ERR! typeerror     at returnAndAddMetadata (/usr/share/npm/lib/fetch-package-metadata.js:117:7)
npm ERR! typeerror     at pickVersionFromRegistryDocument (/usr/share/npm/lib/fetch-package-metadata.js:134:20)
npm ERR! typeerror     at /usr/share/npm/node_modules/iferr/index.js:13:50
npm ERR! typeerror This is an error with npm itself. Please report this error at:
npm ERR! typeerror     <http://github.com/npm/npm/issues>

npm ERR! Please include the following file with any support request:
npm ERR!     /home/luciano/ui/npm-debug.log

Alguien mas le pas贸? hasta ahora no pude solucionarlo.

En un momento le铆 por ah铆 que en nuevas versiones dejar铆an de soportar Bootstrap y dem谩s para irse a Tailwind CSS por completo, pero se ve que siguieron d谩ndole soporte, ya que incluso en la versi贸n 8 de Laravel con la que estoy probando esto, funciona todo bien, sigue funcionando todo bien鈥 Prob茅 con VUE y tambi茅n instala todo, aunque debo destacar de que instala VUE v2.x y no la v3.x que ya est谩 disponible hace mucho, y en el caso de Bootstrap, instala la 煤ltima version de la serie 4.x, que no esta mal, pero ya est谩 disponible la 5.0.1鈥 De todos modos est谩 bueno que le sigan dando soporte鈥 Otra cosa a destacar es que, mas all谩 de instalar vue.js, el login y registro de usuarios funciona sin vue.js, es decir, no cambi贸 las rutas ni nada, ya que no hace requests tipo ajax con vue鈥

A mi me funcion贸 este comando para instalar laravel/ui en laravel 6: composer require laravel/ui=鈥1.*鈥 --dev
Y no me funcion贸: composer require laravel/ui:^1.0 --dev

No compila y genera carpetas css y js dentro de ui/public, no encuentra desactualizado ningun componente de nodejs y solo marcar Err en casi cada linea cuando se ejecuta el npm run dev pero el log indica que posiblemente no sea a causa del npm鈥 alguna idea de por donde buscarle para que compile los css y js bien? Gracias

Para las personas que usan Homestead y al intentar usar el comando 鈥渘pm install鈥 les arrojar谩 un error el cual proviene de VirtualBox, es decir, por el momento Homestead no provee una soluci贸n a dicho error. La soluci贸n por la que opt茅 fue instalar NodeJs en mi maquina local y correr el mismo comando de 鈥渘pm install鈥 dentro de mi proyecto. Espero sea de ayuda

el comando de la cosola de Larvel nos permite instalar el sistema de login con diferente tipos de fronted
podemos implementar con boostrap, react o vue
el comando seria

php artisan ui bootstrap --auth 

Cuando tenemos ya nuestra interfaz de login con el comando laravel ui, debemos de tener instalado Node Js, para poder ejecutar los comando siguientes

npm install
npm run dev

Laravel realmente facilita el desarrollo con PHP, ya viene con un sistema completo para autenticar usuarios.

Wow! ,estoy cambiando mi opini贸n totalmente de booststrap

con react
y hace lo mismo pero tambien en js crea el archivo example.js
import React from 鈥榬eact鈥;
import ReactDOM from 鈥榬eact-dom鈥;

function Example() {
return (
<div className=鈥渃ontainer鈥>
<div className=鈥渞ow justify-content-center鈥>
<div className=鈥渃ol-md-8鈥>
<div className=鈥渃ard鈥>
<div className=鈥渃ard-header鈥>Example Component</div>

                    <div className="card-body">I'm an example component!</div>
                </div>
            </div>
        </div>
    </div>
);

}

export default Example;

if (document.getElementById(鈥榚xample鈥)) {
ReactDOM.render(<Example />, document.getElementById(鈥榚xample鈥));
}

no entiendo de donde saco ese comando de instalacion, en la documentacion oficial no lo veo sino este:

php artisan ui vue --auth

de donde lo saco profe?

Si tuvieran problemas con las dependencias despues del npm update. Prueben actualizando la version de nodejs. Si estan en windows descargen el instalador actual.

php artisan ui react --auth =)

Para instalar laravel/ui para laravel 7.x =>
composer require --dev laravel/ui="^2.0"

Hola, estoy usando xampp, en linux mint 20 (basado en ubuntu), para completar las configuraciones necesarias para laravel ui tengo que instalar npm, opt茅 por instalar entonces node.js, mi duda es: esto se instala dentro de la carpeta de proyecto (para xampp seria dentro de htdocs>miproyecto)? o de forma global, simplemente siguiendo los pasos de instalaci贸n para linux?

Para trabajar con este componente escribimos el comando:

Composer require laravel/ui --dev

鈥揹ev quiere decir para instalar en la zona de desarrollo y no en producci贸n. Esto se puede observar en el archivo componer.json donde va a aparecer en el objeto require-dev como 鈥渓aravel/ui鈥: 鈥1.1鈥

Con esto tengo disponible en mi proyecto todo el sistema de rutas.

Si se escribe php artisan en la consola se puede ver que se instal贸 el comando ui que sirven para tener disponible el sistema de login y registro a nivel de rutas y de vistas
Ahora podemos escribir php artisan ui:auth para que se instale correctamente el sistema pero sin ning煤n estilo o framework de javascript

Pero tenemos 3 variantes:

php artisan ui bootstrap --auth
php artisan ui vue --auth
php artisan ui react --auth

Al ejecutar uno de estos comandos se crea :
Las rutas de autenticaci贸n
Una ruta y controlador de ejemplo
Se crean las vistas correspondientes, las carpetas auth y layouts.
Adem谩s , se crea un controlador de ejemplo que podemos usar o eliminar, y que utiliza el middleware de auth.

Luego ejecutamos:

 npm instal

Luego ejecutamos npm run dev, esto crea desde de public una carpeta de css y js
B谩sicamente todo lo que tenemos en resources/css y js se compila y se guarda a la carpeta p煤blica, a la carpeta js y css. Esto es as铆 porque tenemos un archivo webpack.mix.js donde se tiene esta configuraci贸n.

En laravel 8.x me dio error de instalaci贸n el ui es necesario antes ejecutar este comando:

composer upgrade

espero les sirva

Si no les logra descargar la libreria utilicen el comando

 composer require laravel/ui "^2.*"

Esto es debido a que laravel 7 no es compatible con la version 3 de ui que es la versi贸n mas reciente ui 3 es compatible con laravel 8.
La version compatible con laravel 7 es 2.*, siendo que el simbolo * dice que descargue el ultimo release de la versi贸n 2.
Suerte!!

A ver como, como? puedo usar React dentro de Laravel? porque? con que prop贸sito?

Installe el apartado de auth con Vue.js y he quedado fascinado!

es preferible utilzar bootstrap, a mi me resulta m谩s f谩cil poque tenia conocimiento en eso.

馃く馃く馃く

soy yo o mi carpeta de laravel pesa como 500mb ?