Home

Welcome to the vue-frontend wiki!

This project is the development of a SPA (frontend) made in Vue 3 to consume an API (backend) made in Laravel 9.

Among its main characteristics we have:

• We are consuming the API under the Laravel/Santum's built-in cookie-based session authentication services.

• Using Pinia for handle state.

• Using Tailwind 3 for style.

• Usin Typescript for checking type in development time.

• Using Vue-test-utils for testing app in run time.

<script setup lang="ts">
import { computed } from "vue"
import { useRouter } from "vue-router"

const defaultLayout = "default"
const { currentRoute } = useRouter()
const layout = computed(
  () => `${currentRoute.value.meta.layout || defaultLayout}-layout`
)
</script>

<template>
  <component :is="layout">
    <router-view v-slot="{Component}">
      <transition name="fade" mode="out-in">
        <component :is="Component" :key="$route.path"></component>
      </transition>
    </router-view>
  </component>
</template>

<style lang="css" scoped>
  .fade-enter-active,
  .fade-leave-active{
    transition: opacity 0.3s;
  }

  .fade-enter-from,
  .fade-leave-to{
    opacity:0;
  }
</style>