Vistart

This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 <script setup> SFCs, check out the script setup docs to learn more.

Getting started

# install dependencies
npm install

# run development server
npm run dev

• Vite
• Vue 3
• File-based-routing
• Basic custom components
• useFetch composable

Basic custom components

There are a few basic custom components: Layout, Navigation, and Title.

Layout

This component is only used once in the App.vue to provide a unified template for the application. It contains the <Navigation>, which is the same on all pages as well.

Navigation

This component is only used once in the Layout.vue to provide a unified navigation bar. The links are specified at the top and when a link is active, the class router-link-active is applied automatically, which can be used to style active links differently.

Title

This component can be used on each page to provide a unified page title. Simply put the title of the page as content. As a result, the styling has to be done only once.

<script setup>
import Title from '@/components/Title.vue'
</script>

<template>
  <Title>Home</Title>
</template>

useFetch composable

The useFetch composable can be used to easily fetch data. It accepts both a static URL and a ref of a URL. When it detects that the URL is a dynamic ref, it will run immediately and track the URL. Whenever the URL ref changes, the date will be reset and fetched again.

<script setup>
import { useFetch } from '@/composables/useFetch'

const { data, isLoading, error } = useFetch('https://...')
</script>

<template>
  <div v-if="isLoading">
    Data is being loaded...
  </div>
  <div v-else-if="error !== null || data === null">
    {{ error }}
  </div>
  <div v-else>
    {{ data }}
  </div>
</template>

It returns the following refs:

• data: The returned and parsed JSON data or null.
• isLoading: Whether the data is still loading.
• error: The error that occured or null.