nuxt-fundamentals.pdf

1. Babel Coder
NUXT FUNDAMENTALS

2. Babel Coder
LAYOUT
<template>
<header>Admin Menu</header>
<main><slot /></main>
</template>
<template>
<header>Admin Menu</header>
<main><slot /></main>
</template> layouts/default.vue
layouts/admin.vue
<template>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</template>
app.vue

3. Babel Coder
NAMED LAYOUT
<script setup lang="ts">
de
fi
nePageMeta({
layout: 'admin',
})
</script>
<template>
Dashboard
</template>

4. Babel Coder
ROUTING
/admin/dashboard
/leaves
/articles
/
/leaves/1

5. Babel Coder
REDIRECT
/admin
export default de
fi
neNuxtCon
fi
g({
devtools: { enabled: true },
routeRules: {
'/admin': { redirect: '/admin/dashboard' },
},
}) nuxt.con
fi
g.ts

6. Babel Coder
NUXT LINK
<template>
<header>
<NuxtLink to="/articles">
Articles
</NuxtLink>
<NuxtLink to="/leaves">
Leaves
</NuxtLink>
</header>
<main><slot /></main>
</template>
/articles

7. Babel Coder
NUXT LINK
<template>
<h1 class="title">
Article List
</h1>
<ul>
<li v-for="article of articles" :key="article.id">
<NuxtLink :to="`/articles/${article.id}`">
{{ article.title }}
</NuxtLink>
</li>
</ul>
</template>
/articles/1

8. Babel Coder
useRouter
/articles
/articles
/articles/1 /articles
/leaves
/articles
router.push(‘/articles/1’)
router.replace(‘/leaves’)
router.back()

9. Babel Coder
ROUTER
<script setup lang="ts">
const router = useRouter()
const route = useRoute()
</script>
<template>
<p>{{ route.path }}</p>
<p>{{ route.params }}</p>
<p>{{ route.query }}</p>
<button @click="router.push('/leaves')">
Go to /leaves
</button>
</template>
/leaves/1
{ "id": "1" }
{ "
fi
eld": "id,reason" }
/leaves/1?
fi
eld=id,reason