How to build a static blog part 6

Thursday, 6 July 2023

Pages and layouts

Ok lets start building our pages.

Find app.vue which is the entry point for our blog. In the template, delete the Nuxt Welcome page <NuxtWelcome/> and replace it with this:

<NuxtLayout>
    <NuxtPage />
</NuxtLayout>

If you have your browser showing the Nuxt page, when you save this file the page will go blank. We'll come back to this file later. Next up, we need to define a layout for our pages to use.

Create a new folder in the root : layouts and inside it, create a new file called default.vue. Then lets add some markup, and a lot of tailwind styles for our pages.

<template>
    <div class="dark:bg-slate-900 bg-slate-300 min-h-[100vh] transition-all">
        <main
            class="prose dark:prose-invert prose-slate max-w-2xl px-3 py-7 mx-auto bg-white sm:px-8 sm:shadow dark:bg-slate-800 ring-1 ring-slate-200 dark:ring-slate-700 sm:rounded-lg dark:prose-a:text-sky-500 dark:hover:prose-a:text-sky-600 prose-a:text-sky-700 hover:prose-a:text-sky-600"
        >
            <slot />
        </main>
    </div>
</template>

<style lang="postcss">
    /* override tailwind's styles for inline code */
    .prose :where(code):not(:where(pre *)) {
        @apply bg-slate-200 dark:bg-slate-900 p-1 rounded font-normal;
    }
    /* and the headings */
    .prose h4 > a,
    .prose h3 > a,
    .prose h2 > a {
        @apply text-slate-800 dark:text-white text-2xl no-underline;
    }
</style>

Our pages will use this default layout because above we wrapped the <NuxtPage/> component inside the <NuxtLayout> component. So our pages will be inserted into the slot in the default layout file and inherit the styles which are defined on the main tag. See the Nuxt docs for more about layouts.

Now we need a page to actually use this layout. Create a new folder in the root called pages. Then a file inside that called index.vue.

<template>
    <div class="mx-auto">
        <article>
            <ContentDoc path="/home" />
        </article>
    </div>
</template>

This is where our content will be rendered out by the Nuxt content module. Here we are giving it a specific path to look for our content. So we need to add some content in that path. Create a folder called content in the root, and inside create a new file called home.md.

---
title: "Nuxt 3 blog "
description: "This is a blog powered by Nuxt 3 "
---

# Hello world. 👋

If you haven't already, start up the Nuxt dev server by typing yarn dev in your terminal. Head to the localhost address that it uses, by default http://localhost:3000/, and you should see the Hello World message in your browser. Whatever you add to your home.md file will now be rendered as your blog's homepage, and will be styled by our default layout.

Notice the frontmatter at the top of the markdown: this defines the pages html title and meta description, to keep the search engines happy.

Lets create another page, while we're on a roll, in the pages folder, create a new folder called about and inside that a file called index.vue.

<template>
    <article>
        <ContentDoc />
    </article>
</template>

This time we haven't specified a path, Nuxt Content will infer this from the route that Nuxt will assign to this page. Nuxt does this automatically based on the file location, so this page will be /about . We need to add a markdown file in our content directory (about.md) that will contain the content for this page:

---
title: "About me"
description: "Read more about me"
---

# About Me

---
Lorem ipsum dolor sit amet

Great, if you visit localhost:3000/about in your browser, you should see your new about page.

Now we have some pages, lets create a navbar to link them up.

go back