CATALOGUE Code & Data Formation JavaScript Apprendre Vue JS 3

Contenu premium

Intégration de Firebase dans un projet VueJS 3 avec Vite

Chapitre 7 Leçon 1

Découvrez comment assurer la persistance des données d'une application VueJS 3 grâce à Firebase en utilisant Vite.

Apprendre Vue JS 3

11h47 91 leçons

Formation Complète pour Débutants en Vue 3 03:39

Préparation de l'Environnement de Développement pour Vue 3 09:53

Tutoriel : Créer une Application Vue JS avec le Modèle MVVM 02:47

Apprentissage de Vue 3 avec un Projet HTML Simple 14:11

Utilisation des Expressions JavaScript dans les Interpolations 07:08

Utilisation des Propriétés Calculées dans Vue 3 09:53

Comprendre et Utiliser le Data Binding en Vue.js 05:55

Maîtrisez les Directives v-text et v-html dans Vue.js 13:44

Maîtriser le Binding Bidirectionnel avec Vue.js 09:58

Apprendre les directives v-bind et v-model sur Vue.js 13:18

Gestion des événements dans Vue.js 3 09:24

Utilisation de l'objet JavaScript Event pour capturer les coordonnées de la souris 05:52

Utilisation de StopPropagation et PreventDefault dans Vue.js 09:56

Maîtriser les Modificateurs d'Événements en Javascript 08:41

Apprendre à Utiliser la Directive v-for en Vue 3 13:07

Utilisation d'Arguments Dynamiques avec Vue.js 06:45

Utilisation de la Directive V for avec des Tableaux JSON en Vue.js 03:41

Gestion des Événements Claviers en Vue JS 05:24

Utilisation de la directive v-cloak dans Vue.js 01:58

Utilisation de la Directive v-once dans Vue.js 03:37

Utilisation des Classes Conditionnelles avec vbind et vmodel 13:21

Modification des Styles Inline avec Vue.js 07:54

Introduction à l'affichage conditionnel avec Vue.js 07:48

Création d'une application avec Vue JS 3 10:14

Utilisation de la directive v-for dans Vue.js 11:28

Apprendre à lier des images dynamiquement avec Vue.js 08:51

Formation sur la Création de Composants Vue Globaux 04:02

Optimisation de l'utilisation des composants en JavaScript 04:13

Ajouter des données dans des composants 08:47

Ajout de Méthodes dans un Composant Vue.js 03:21

Utilisation des Props dans un Composant 07:49

Accéder et Utiliser les Props dans les Composants JavaScript 05:37

Transférer des données entre composants Vue.js 04:05

Utilisation de $emit() dans Vue.js 10:39

Utilisation des Lifecycle Hooks dans Vue.js 10:22

Créer des Composants Vue.js avec Axios 11:32

Utilisation des Slots Simples dans Vue JS 05:34

Tutoriel sur l'utilisation des slots nommés avec v-slot dans Vue.js 03:44

Utiliser les slots avec portée dans Vue.js 07:09

Remplacer les filtres par des propriétés calculées dans Vue JS 3 11:58

Utilisation des Observateurs dans un Modèle d'Application 08:46

Utilisation Asynchrone de la Fonction JavaScript SetTimeout 06:11

Transitions et Animations en Vue JS 06:28

Réalisez des Transitions en Vue.js 07:34

Maîtriser les Transitions IN-OUT et OUT-IN avec Vue JS 07:39

Apprendre les Transitions en Vue.js 07:37

Ajouter des Transitions Animées aux Listes dans Vue.js 09:23

Animations avancées avec Vue JS et Animate.css 07:27

Animations avec Velocity.js dans Vue 3 12:08

Créer une Application SPA avec Vue 3 et Vue Router 11:40

Implémentation des Navigation Guards dans Vue.js 10:32

Effectuer des Transitions dans une Application SPA 06:57

Création d'une Application Vue.js avec Vue CLI 05:18

Analyse de l'Architecture d'une Application Vue.js 06:18

Création d'une Application Vue.js avec Composants Inscrits 11:15

Intégration d'Axios et Bootstrap dans une application Vue JS 18:26

Créer des Fonctions de Rendu dans Vue.js 06:51

Simplifier les Composants Vue.js avec des Fonctions de Rendu 07:25

Création de Composants Fonctionnels avec Vue JS 03:28

Transformation de Composant Local en Composant Fonctionnel 04:36

Gestion de l'état avec VueX dans une application VueJS 07:17

Gestion de Stock avec Vue.js et Vuex 09:40

Accéder à l'état du store dans les composants VueJS 03:40

Utilisation des Plugins dans VueX pour Gérer les Mutations 06:53

Créer un Store Minimaliste avec Vue.js Réactive 07:40

Gestion de l'État avec VueX dans Vue.js 08:58

Validation de formulaires avec Vue.js 16:22

Utilisation de Pina pour la gestion d'état dans Vue.js avec Vite 03:39

Tutoriel pour Nettoyer les Fichiers Vite et Construire une Interface d'Application 03:25

Apprendre à créer un store avec PINIA dans Vue.js 05:58

Interfacer le store Pina avec votre application Vue.js 06:55

Intégration du Store Pina dans Vue.js 03:58

Intégration de Firebase dans un projet VueJS 3 avec Vite 04:36

Intégration de Firebase avec Vue.js 03:07

Comment créer une base de données Firebase avec Vue.js 03:54

Connexion entre Firebase et Vue.js 08:09

Utilisation de l'API de Composition pour Afficher des Données Réactives dans Vue.js 05:54

Ajout et Suppression de Notes avec Firebase 16:46

Création et Utilisation des Mixins Locaux dans Vue.js 05:10

Utilisation des Mixins Globaux dans Vue.js 02:25

Étendre Vue JS avec des Plugins 11:19

Maîtriser les Directives Personnalisées dans Vue.js 14:29

Typer les Props avec Vue.js 06:54

Développer des Applications Mobiles avec NativeScript-Vue 05:53

Créer des images cliquables avec NativeScript Vue 06:16

Utilisation du composant Teleport dans Vue JS 3 07:36

Utilisation de la Composition API avec Vue.js 3 13:19

Apprenez à gérer les variables réactives avec Vue.js 03:04

Utiliser la Fonction Computed dans Vue.js 02:36

Optimisation du Code avec la Composition API de Vue.js 3 03:25

Créer une Application Vue 3 avec TypeScript 13:42

Détails de la leçon

Description de la leçon

Pour garantir la persistance des données d'une application VueJS 3 sur diverses plateformes, telles que des ordinateurs, tablettes ou smartphones, l'utilisation d'une base de données est impérative. Bien que des solutions SQL comme PostgreSQL ou MySQL soient couramment employées, cette leçon se concentre sur l'intégration de Firebase, une base de données NoSQL maintenue par Google, au sein d'un projet VueJS 3. Firebase offre des capacités généreuses gratuitement, notamment un giga octet d'espace de stockage, et permet d'effectuer 20 000 écritures, 50 000 lectures et 20 000 suppressions de documents par jour.

En utilisant l'outil de ligne de commande Vite, développé par le créateur de VueJS, Evan New, cette vidéo démontre comment créer un projet VueJS 3 plus rapidement et efficacement que via Webpack. À travers des étapes pas à pas, cette leçon couvre la création d'un nouveau projet nommé 'Firebase', la suppression des composants et icônes inutiles, et l'ajustement des fichiers initiaux comme index.html et app.vue.

Cette vidéo est dédiée à quiconque souhaite améliorer ses compétences en développement avec VueJS et Firebase, offrant ainsi une base solide pour la création d'applications modernes et réactives.

Objectifs de cette leçon

Les objectifs de cette vidéo sont de :

Montrer comment utiliser Firebase pour la persistance des données dans une application VueJS 3.
Présenter l'outil de ligne de commande Vite pour créer des projets plus rapidement.
Fournir un exemple pratique de configuration initiale et de nettoyage d'un projet VueJS 3.

Prérequis pour cette leçon

Pour suivre cette vidéo, vous devez avoir des connaissances de base en :

VueJS 3 et son écosystème.
npm et les commandes de base.
Utilisation d'un éditeur de code, de préférence Visual Studio Code.

Métiers concernés

Les connaissances acquises dans cette vidéo sont bénéfiques pour diverses professions, notamment :

Développeur Front-End, pour créer des applications réactives utilisant VueJS.
Développeur Full-Stack, pour intégrer des solutions de persistance de données.
Architecte de solutions, pour concevoir des architectures modernes avec Firebase.

Alternatives et ressources

Parmi les alternatives à Firebase, vous pouvez envisager :

Utiliser une base de données SQL comme PostgreSQL ou MySQL.
Explorer d'autres solutions NoSQL telles que MongoDB ou CouchDB.

Questions & Réponses

Firebase est maintenue par Google, offre une grande générosité pour un usage gratuit et assure une rapidité de mise en œuvre et de gestion des données.

Vite, développé par Evan New, est plus rapide et plus efficace que Webpack, ce qui permet de développer des projets VueJS 3 de manière plus fluide.

Ouvrez le fichier index.html et modifiez la balise pour y inclure le nouveau nom de votre projet.

Acheter maintenant

Je m'abonne

Intégration de Firebase dans un projet VueJS 3 avec Vite

Premiers pas en Vue3

Les composants Vue JS

Les applications SPA (Single Page Applications)

L'interface en ligne de commande Vue-Cli

Le gestionnaire d'état Vuex

Le gestionnaire d'état Pinia

Persistance des données avec Firebase

Plus loin avec Vue.js 3