Vue avec Supabase : guide pratique

Pourquoi Vue avec Supabase : guide pratique ?

Le développement web moderne demande une combinaison puissante et flexible de frameworks frontend et d'APIs backend. Vue.js est un framework frontend populaire pour sa flexibilité, sa performance et son écosystème actif. Supabase, quant à elle, est une plateforme d'infrastructure serverless pour le backend qui facilite la création d'applications web et mobiles en fournissant des outils de base de données, d'authentification et de fonctionnalités API sans avoir besoin de se soucier du serveur.

En combinant Vue.js avec Supabase, vous pouvez créer des applications robustes et évolutives rapidement. Ce guide pratique vise à vous aider à comprendre comment intégrer ces deux technologies en construisant un projet réel : une application de gestion de tâches.

Prerequis

• Connaissance de base de Vue.js (v2 ou v3)
• Familiarité avec JavaScript ES6+
• Compréhension des concepts de Reactivity, Props et Events
• Installation de Node.js et npm (version recommandée : 14.x ou plus tard)
• Un compte Supabase

Concepts fondamentaux

1. Vue.js

Vue.js est un framework frontend moderne qui permet de créer des interfaces utilisateur réactives. Voici les concepts clés :

Composants

Les composants sont les blocs de construction de votre application Vue. Chaque composant peut avoir sa propre structure, son style et son comportement.

## Example of a Vue component
<template>
  <div>
    message
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!'
    }
  }
}
</script>

<style scoped>
/* Styles scoped to this component */
</style>

Props et Events

Les props permettent de passer des données d'un composant parent à un composant enfant. Les events permettent de communiquer dans le sens inverse.

## Parent component passing a prop and listening for an event
<template>
  <ChildComponent :message="parentMessage" @custom-event="handleEvent" />
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from Parent'
    }
  },
  methods: {
    handleEvent(payload) {
      console.log('Custom event received with payload:', payload);
    }
  }
}
</script>

2. Supabase

Supabase est une plateforme serverless qui permet de créer des applications web et mobiles en fournissant des outils de base de données, d'authentification et de fonctionnalités API.

Authentification

Supabase offre un système d'authentification complet avec OAuth2, Google, Facebook, etc.

// Initialize Supabase client
import { createClient } from '@supabase/supabase-js';
const supabaseUrl = 'https://your-supabase-url.supabase.co';
const supabaseKey = 'your-anon-key';
const supabase = createClient(supabaseUrl, supabaseKey);

// Sign up a new user
async function signUp(email, password) {
  const { data, error } = await supabase.auth.signUp({ email, password });
  if (error) throw error;
  return data.user;
}

Base de données

Supabase fournit une base de données SQL réactive.

// Fetch tasks from the database
async function fetchTasks() {
  const { data: tasks, error } = await supabase.from('tasks').select('*');
  if (error) throw error;
  return tasks;
}

// Insert a new task into the database
async function insertTask(taskData) {
  const { data, error } = await supabase.from('tasks').insert([taskData]);
  if (error) throw error;
  return data[0];
}

Mise en pratique : projet fil rouge

Step-by-Step Project: Task Manager App

Étape 1: Création du projet Vue.js

## Create a new Vue project
npm init vue@latest task-manager-app
cd task-manager-app
npm install

Étape 2: Configuration de Supabase

// src/main.js
import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);

app.mount('#app');

// Initialize Supabase client
import { createClient } from '@supabase/supabase-js';
const supabaseUrl = 'https://your-supabase-url.supabase.co';
const supabaseKey = 'your-anon-key';
export const supabase = createClient(supabaseUrl, supabaseKey);

Étape 3: Création du composant TaskList

## src/components/TaskList.vue
<template>
  <div>
    <h2>Tasks</h2>
    <ul>
      <li v-for="task in tasks" :key="task.id">
        task.name - task.description
      </li>
    </ul>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import { supabase } from '../main';

export default {
  setup() {
    const tasks = ref([]);

    onMounted(async () => {
      try {
        const { data: fetchedTasks, error } = await fetchTasks();
        if (error) throw error;
        tasks.value = fetchedTasks;
      } catch (error) {
        console.error('Error fetching tasks:', error);
      }
    });

    return {
      tasks
    };
  }
};
</script>

Étape 4: Création du composant TaskForm

## src/components/TaskForm.vue
<template>
  <div>
    <h2>Add Task</h2>
    <form @submit.prevent="addTask">
      <input v-model="newTask.name" placeholder="Name" required />
      <textarea v-model="newTask.description" placeholder="Description" required></textarea>
      <button type="submit">Add Task</button>
    </form>
  </div>
</template>

<script>
import { ref } from 'vue';
import { supabase } from '../main';

export default {
  setup() {
    const newTask = ref({
      name: '',
      description: ''
    });

    async function addTask() {
      try {
        const { data, error } = await insertTask(newTask.value);
        if (error) throw error;
        console.log('Task added:', data);
        // Optionally reset form
        newTask.value = { name: '', description: '' };
      } catch (error) {
        console.error('Error adding task:', error);
      }
    }

    return {
      newTask,
      addTask
    };
  }
};
</script>

Étape 5: Intégration des composants dans App.vue

## src/App.vue
<template>
  <div id="app">
    <TaskForm />
    <TaskList />
  </div>
</template>

<script>
import TaskForm from './components/TaskForm.vue';
import TaskList from './components/TaskList.vue';

export default {
  name: 'App',
  components: {
    TaskForm,
    TaskList
  }
};
</script>

Conclusion

Ce guide pratique vous a montré comment créer une application de gestion de tâches complète en utilisant Vue.js et Supabase. Vous avez appris à structurer un projet Vue, à utiliser les composants, à gérer l'état et à intégrer des fonctionnalités backend grâce à Supabase.

Vous pouvez maintenant aller plus loin en explorant les concepts avancés de Vue.js comme le Composition API, les transitions et les animations, ainsi que les fonctionnalités supplémentaires de Supabase pour enrichir votre application.