Antes do lançamento do Laravel UI, um de seus principais recursos era o pré-suportedefinoite para Vue.js de Laravel v5.3 a v6. Vue é uma estrutura de front-end JavaScript moderna usada para criar interfaces de usuário.
Aqui estão alguns dos principais benefícios de usar Laravel com Vue para criar um fluxo de trabalho completo para seus projetos:
O código-fonte é combinado em um projeto, em vez de ter projetos separados para back-end e front-end
A instalação e configuração são simples
Uma única distribuição pode gerenciar os dois frameworks juntos
Uma aplicativo de página única (SPA para abreviar) carrega dinamicamente novos dados de um servidor web em uma página web sem ter que atualizar a página inteira.
Exemplos de sites populares que usam SPAs incluem gmail.com e youtube.com – em outras palavras, os SPAs são amplamente onipresentes. A maioria dos painéis administrativos com os quais você pode trabalhar diariamente é criada usando o SPA.
Vantagens dos SPAs:
A experiência do usuário é mais flexível
Cache de dados no navegador
Tempo de carregamento rápido
Desvantagens dos SPAs:
Pode comprometer o SEO (otimização do mecanismo de pesquisa)
Possíveis problemas de segurança
Consome muitos recursos do navegador
Esta postagem demonstrará como desenvolver um aplicativo de tarefas que permite aos usuários se inscrever em uma conta e adicionar tarefas.
Para este tutorial, é utilizado o Laravel 9, que requer PHP 8.1 e Vue 3; também precisamos ter PHP e NGINX instalados.
Iniciamos com o seguinte comando:
composer create-project --prefer-dist laravel/laravel laravel-vue-comboEm seguida, instalaremos as dependências do JavaScript.
npm installPrecisamos instalar alguns pacotes antes de podermos adicionar o Vue ao nosso projeto.
Além disso, o plugin-vue deve ser instalado, já que o Laravel 9 vem com o Vite, em vez do webpack-mix, que era o empacotador anterior do Laravel para JavaScript. Vamos fazer agora:
npm install vue@next vue-loader@next @vitejs/plugin-vueAbra o arquivo chamado vite.config.js e adicione vue() para configuração:
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [
vue(),
laravel([
'resources/css/app.css',
'resources/js/app.js',
]),
],
});Edite o arquivo app.js e o trecho de bootstrap para o aplicativo Vue 3:
require('./bootstrap');
import {createApp} from 'vue'
import App from './App.vue'
createApp(App).mount("#app")Crie um arquivo chamado App.vue e adicione o seguinte:
<template>
<h1> Hello, Vuejs with Laravel </h1>
</template>
<script>
export default {
setup() {
}
}
</script>Por fim, abra o arquivo welcome.blade.php localizado na pasta resources/views e adicione o seguinte:
<!DOCTYPE html>
<html>
<head>
....
@vite('resources/css/app.css')
</head>
<body>
<div id="app"></div>
@vite('resources/js/app.js')
</body>
</html>Para visualizar nosso aplicativo, precisamos iniciar nosso aplicativo Vue e o servidor Laravel em dois terminais/linhas de comando diferentes:
npm run dev
php artisan servePara criar nosso aplicativo de tarefas, precisamos criar outros arquivos. O Vue criará várias páginas, principalmente:
Para se comunicar com os endpoints do Laravel, precisamos instalar o Axios:
npm install axiosUsando o pacote vue-router, existem várias estratégias de roteamento que podem ser usadas no Vue; Essas estratégias também são conhecidas como history models.
Quando um usuário solicita route como http://localhost:8000/home, que retornará um erro 404 quando a página for atualizada, podemos confiar no Laravel para detectar quaisquer rotas de fallback e, em seguida, servir o arquivo Blade que contém nosso aplicativo.
Por esse motivo, usaremos o modo HTML5:
Route::get('/{vue_capture?}', function() {
return view('welcome');
})->where('vue_capture', '[\/\w\.-]*');import {createRouter, createWebHistory} from 'vue-router';
const router = createRouter({
history: createWebHistory(),
routes: [
{
path: '/',
component: () => import('./pages/Login.vue')
},
{
path: '/register',
component: () => import('./pages/Register.vue')
},
{
path: '/home',
component: () => import('./pages/Home.vue')
}
],
})Neste exemplo, lidamos com a autenticação usando Laravel SanctumName, então o token é salvo no armazenamento local.
Para que outras solicitações sejam bem-sucedidas, o token é mesclado no cabeçalho, o que permitirá que o usuário que fez a solicitação seja identificado pelo Laravel.
Aqui estão os blocos de código associados para ambos:
<!--Login.vue-->
<template>
<div class="mx-auto w-4/12 mt-10 bg-blue-200 p-4 rounded-lg">
<div
class="bg-white shadow-lg rounded-lg px-8 pt-6 pb-8 mb-2 flex flex-col"
>
<h1 class="text-gray-600 py-5 font-bold text-3xl"> Login </h1>
<ul class="list-disc text-red-400" v-for="(value, index) in errors" :key="index" v-if="typeof errors === 'object'">
<li>{{value[0]}}</li>
</ul>
<p class="list-disc text-red-400" v-if="typeof errors === 'string'">{{errors}}</p>
<form method="post" @submit.prevent="handleLogin">
<div class="mb-4">
<label
class="block text-grey-darker text-sm font-bold mb-2"
for="username"
>
Email Address
</label>
<input
class="shadow appearance-none border rounded w-full py-2 px-3 text-grey-darker"
id="username"
type="text"
v-model="form.email"
required
/>
</div>
<div class="mb-4">
<label
class="block text-grey-darker text-sm font-bold mb-2"
for="password"
>
Password
</label>
<input
class="shadow appearance-none border border-red rounded w-full py-2 px-3 text-grey-darker mb-3"
id="password"
type="password"
v-model="form.password"
required
/>
</div>
<div class="flex items-center justify-between">
<button
class="bg-blue-500 hover:bg-blue-900 text-white font-bold py-2 px-4 rounded"
type="submit"
>
Sign In
</button>
<router-link
class="inline-block align-baseline font-bold text-sm text-blue hover:text-blue-darker"
to="register"
>
Sign Up
</router-link>
</div>
</form>
</div>
</div>
</template>export default {
setup() {
const errors = ref()
const router = useRouter();
const form = reactive({
email: '',
password: '',
})
const handleLogin = async () => {
try {
const result = await axios.post('/api/auth/login', form)
if (result.status === 200 && result.data && result.data.token) {
localStorage.setItem('APP_DEMO_USER_TOKEN', result.data.token)
await router.push('home')
}
} catch (e) {
if(e && e.response.data && e.response.data.errors) {
errors.value = Object.values(e.response.data.errors)
} else {
errors.value = e.response.data.message || ""
}
}
}
return {
form,
errors,
handleLogin,
}
}
}Ercole Palmeri
Você também pode estar interessado em ...
A Coveware by Veeam continuará a fornecer serviços de resposta a incidentes de extorsão cibernética. A Coveware oferecerá recursos forenses e de remediação…
A manutenção preditiva está revolucionando o setor de petróleo e gás, com uma abordagem inovadora e proativa para o gerenciamento de plantas.…
A CMA do Reino Unido emitiu um alerta sobre o comportamento da Big Tech no mercado de inteligência artificial. Lá…
O Decreto "Case Green", formulado pela União Europeia para melhorar a eficiência energética dos edifícios, concluiu o seu processo legislativo com…