Vue Laravel Sanctum

A Vue 3 plugin for Laravel Sanctum.

Installation

To install the package, run the following command:

  npm install vue-laravel-sanctum

Configuration

Add the plugin in your main.ts or main.js file, and provide the required options.

import { createApp } from 'vue';
import App from './App.vue';
import { vueLaravelSanctum } from 'vue-laravel-sanctum';

const authConfig = {
  apiURL: 'http://localhost:8000',
  endpoints: {
    csrf: '/sanctum/csrf-cookie',
    login: '/login',
    logout: '/logout',
    user: '/api/user',
  },
};

const app = createApp(App);
app.use(vueAuthSanctum, authConfig);
app.mount('#app');

useSanctumAuth

To authenticate a user you should pass the credentials payload as an argument to the login method. The payload should contain all fields required by your Laravel Sanctum backend.

views/Login.vue

  import {ref} from 'vue';
  import { useSanctumAuth } from 'vue-laravel-sanctum';

  const { login } = useSanctumAuth();

  const userCredentials = ref({
      email: '[email protected]',
      password: '123123',
  });
  const onSubmit = async () => {
    await login(userCredentials.value);
  }

useSanctumUser

This composable provides access to the current authenticated user. It supports generic types, so you can get the user as any class you want.

views/Dashboard.vue

  import { useSanctumUser } from 'vue-laravel-sanctum';
  const user = useSanctumUser();

Data Fetching

useApi

This composable allows you to fetch and manipulate data using the configured API.

views/products.vue

  import { useApi } from 'vue-laravel-sanctum';

  const { data, loading } = useApi('/api/products');

  console.log(data.value); // Access fetched data

useApi

To send data to the server, use the $api method with the appropriate options: views/create.vue

  import { useApi } from 'vue-laravel-sanctum';

    const { $api } = useApi();

    const newProduct = {
      title: 'New Product',
      price: 100,
    };

    const addProduct = async () => {
      const response = await $api('/api/products', {
        method: 'POST',
        data: newProduct,
      });
      console.log(response);
    };