Pourquoi Deployer Nuxt sur Vercel ?
Contexte réel : Deployer Nuxt sur Vercel est une étape cruciale pour les développeurs modernes qui cherchent à rendre leur application web plus performante, fiable et facilement accessible. Vercel offre un environnement de développement rapide et scalable, ce qui permet aux développeurs d'optimiser leur application en termes de charge de travail, de temps de réponse et de disponibilité.
Un cas d'utilisation concret : Imaginez que vous développez une application de gestion de projets pour votre entreprise. Vous souhaitez que cette application soit accessible à partir de n'importe quel endroit au monde avec un temps de réponse minimal. Deployer Nuxt sur Vercel permet d'optimiser le rendu côté client et de réduire les délais de publication, ce qui est essentiel pour une telle application.
Prerequis
Connaissances nécessaires :
- Connaissance de base de JavaScript et Node.js
- Familiarité avec Nuxt.js (une structure de framework pour Vue.js)
- Compréhension des concepts de Reactivity et Asynchronism en JavaScript
- Expérience avec les routes côté serveur
Outils à installer :
- Node.js (version recommandée : >=14.0.0)
- npm (Node Package Manager) ou yarn
- Vercel CLI (pour déployer directement depuis votre terminal)
Concepts fondamentaux
1. Nuxt.js
Nuxt.js est un framework Vue.js qui simplifie la création d'applications web performantes et réactives. Il inclut des fonctionnalités out-of-the-box telles que le rendu côté serveur, le pré-génération de pages statiques, et l'optimisation du SEO.
## Structure d'un projet Nuxt.js basique
/
├── assets/ # Ressources statiques
├── components/ # Composants Vue.js réutilisables
├── layouts/ # Layouts de pages
├── middleware/ # Middleware pour gérer les requêtes avant et après le rendu
├── nuxt.config.js # Configuration globale du projet
├── pages/ # Pages dynamiques et statiques
├── plugins/ # Plugins Vue.js
├── static/ # Ressources non traitées par Webpack
└── store/ # État global de l'application (Vuex)
2. Pré-génération de pages statiques
Vercel prend en charge la pré-génération des pages statiques pour les projets Nuxt.js, ce qui permet de rendre votre application accessible via le réseau sans avoir besoin d'un serveur Node.js en continu.
## nuxt.config.js
export default {
generate: {
routes: [
'/about',
'/contact'
]
}
}
3. Middleware
Le middleware est utilisé pour gérer les requêtes avant et après le rendu des pages dans Nuxt.js.
## middleware/auth.js
export default function ({ store, redirect }) {
if (!store.state.authenticated) {
return redirect('/login')
}
}
Mise en pratique : projet fil rouge
Nous allons créer un mini-projet complet et réaliste : une application de gestion de tâches basée sur Nuxt.js.
Étape 1 : Initialisation du projet
npx create-nuxt-app nuxt-todo
Choisissez les options suivantes :
- Vue.js version: 2.x
- Package manager: npm
- Rendering mode: Universal (SSR/SSG)
- Deployment target: Server (Node.js hosting)
- Development tools: Linter / Formatter
- Features: Axios, Progressive Web App (PWA) Support
Étape 2 : Création des composants et des pages
Créez un composant Task.vue pour afficher une tâche.
<!-- components/Task.vue -->
<template>
<div class="task">
<h3>task.title</h3>
<p>task.description</p>
</div>
</template>
<script>
export default {
props: {
task: {
type: Object,
required: true
}
}
}
</script>
<style scoped>
.task {
border: 1px solid #ccc;
padding: 10px;
margin-bottom: 10px;
}
</style>
Créez une page index.vue pour afficher la liste des tâches.
<!-- pages/index.vue -->
<template>
<div>
<h1>Gestionnaire de Tâches</h1>
<ul v-if="tasks.length">
<li v-for="task in tasks" :key="task.id">
<Task :task="task" />
</li>
</ul>
<p v-else>Aucune tâche en cours.</p>
</div>
</template>
<script>
import Task from '~/components/Task.vue'
export default {
components: {
Task
},
data() {
return {
tasks: [
{ id: 1, title: 'Faire les courses', description: 'Acheter du lait, des œufs et des pain' },
{ id: 2, title: 'Nettoyer la chambre', description: 'Étirer le lit et ranger les vêtements' }
]
}
}
}
</script>
Étape 3 : Ajout de l'authentification
Ajoutez un middleware auth.js pour gérer l'authentification.
## middleware/auth.js
export default function ({ store, redirect }) {
if (!store.state.authenticated) {
return redirect('/login')
}
}
Créez une page login.vue pour l'authentification.
<!-- pages/login.vue -->
<template>
<div>
<h1>Connexion</h1>
<form @submit.prevent="login">
<input type="text" v-model="username" placeholder="Nom d'utilisateur" />
<input type="password" v-model="password" placeholder="Mot de passe" />
<button type="submit">Se connecter</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: ''
}
},
methods: {
async login() {
// Simuler une authentification réussie
this.$store.commit('setAuthenticated', true)
this.$router.push('/')
}
}
}
</script>
Étape 4 : Ajout d'Axios pour les requêtes API
Ajoutez Axios au projet.
npm install axios
Créez un service task.js pour gérer les requêtes API.
// services/task.js
import axios from 'axios'
export const getTasks = async () => {
const response = await axios.get('https://jsonplaceholder.typicode.com/todos')
return response.data
}
Utilisez ce service dans la page index.vue.
<!-- pages/index.vue -->
<template>
<div>
<h1>Gestionnaire de Tâches</h1>
<ul v-if="tasks.length">
<li v-for="task in tasks" :key="task.id">
<Task :task="task" />
</li>
</ul>
<p v-else>Aucune tâche en cours.</p>
</div>
</template>
<script>
import Task from '~/components/Task.vue'
import { getTasks } from '~/services/task'
export default {
components: {
Task
},
async data() {
const tasks = await getTasks()
return { tasks }
}
}
</script>
Erreurs fréquentes et debugging
1. Erreur : Cannot read property 'map' of undefined
Code incorrect :
// pages/index.vue
data() {
return {
tasks: []
}
},
created() {
this.tasks = await getTasks()
}
Code correct :
// pages/index.vue
data() {
return {
tasks: null
}
},
async asyncData({ $axios }) {
const tasks = await $axios.$get('https://jsonplaceholder.typicode.com/todos')
return { tasks }
}
2. Erreur : Unhandled Promise Rejection (rejectionId: 1): Error: Request failed with status code 404
Code incorrect :
// services/task.js
export const getTasks = async () => {
const response = await axios.get('https://jsonplaceholder.typicode.com/tasks')
return response.data
}
Code correct :
// services/task.js
import axios from 'axios'
const API_URL = 'https://jsonplaceholder.typicode.com'
export const getTasks = async () => {
const response = await axios.get(`${API_URL}/todos`)
return response.data
}
3. Erreur : Uncaught SyntaxError: Unexpected token < in JSON at position 0
Code incorrect :
// services/task.js
export const getTasks = async () => {
const response = await axios.get('https://jsonplaceholder.typicode.com/tasks')
return response.data
}
Code correct :
// services/task.js
import axios from 'axios'
const API_URL = 'https://jsonplaceholder.typicode.com'
export const getTasks = async () => {
try {
const response = await axios.get(`${API_URL}/todos`)
return response.data
} catch (error) {
console.error('Error fetching tasks:', error)
return []
}
}
Pour aller plus loin
Utilisation de Vuex pour la gestion de l'état global : En apprenant à utiliser Vuex, vous pourrez gérer un état complexe et répartir les données entre différents composants.
Création d'une API backend avec Nuxt.js : Vous pouvez créer une API complète côté serveur en utilisant Nuxt.js, ce qui permet de gérer des opérations CRUD sur vos données.
Optimisation des performances : Découvrez comment optimiser les performances de votre application en utilisant des techniques comme le pré-génération statique, la lazy loading et l'optimisation du code côté client.
Défi pratique
Créez une API simple pour gérer des utilisateurs (CRUD operations) et intégrez-la à votre application Nuxt.js. Utilisez Axios pour les requêtes API et Vuex pour la gestion de l'état utilisateur.
Bonne chance avec cette formation !