fadamakis

<script setup lang="ts">
import BootstrapIcons from "bootstrap-icons/bootstrap-icons.svg";
import { computed, PropType } from "vue";

const props = defineProps({
  icon: {
    type: String,
    required: true,
  },
  size: {

fadamakis

<script>
import { useFellowship } from '@/stores/fellowship'

export default {
  setup() {
    const fellowship = useFellowship()
    
    // Access to the state 
    // can be done directly
    console.log(fellowship.heroes)

fadamakis

import { defineStore } from 'pinia'

export const useFellowship = defineStore('fellowship', {
  state: () => {
    return { heroes: ['Aragorn', 'Legolas', 'Gimli', 'Gandalf'] }
  },
  actions: {
    addHero(hero) {
      this.heroes.push(hero)
    },

fadamakis

import { reactive } from "vue";

export const store = {
  state: reactive({
    heroes: ['Aragorn', 'Legolas', 'Gimli', 'Gandalf']
  }),
  addHero(hero) {
    this.state.heroes.push(hero);
  }
};

fadamakis

<router>
  {
    path: '/post/:id/:title?'
  }
</router>

fadamakis

<router>
 {
    path: '/posts',
    alias: [
      '/articles',
      '/blog'
    ]
 }
</router>

fadamakis

<router>
  {
    path: '/posts'
  }
</router>

fadamakis

<template>
  <div>
    <p v-if="$fetchState.pending">Loading....</p>
    <p v-else-if="$fetchState.error">Error while fetching mountains</p>
    <ul v-else>
      <li v-for="(mountain, index) in mountains" :key="index">
        {{ mountain.title }}
      </li>
    </ul>
  </div>

fadamakis

<template>
  <div>
    <div v-if="$nuxt.isOffline">You are offline</div>
    <nuxt />
  </div>
</template>

fadamakis

<template>
  <div>
    <div>{{ content }}</div>
    <button @click="refresh">Refresh</button>
  </div>
</template>

<script>
  export default {
    asyncData() {