npx create-nuxt-app nuxt-blog

npm i --save-dev pug pug-plain-loader node-sass sass-loader fibers

<template lang="pug"></template>
<style lang="scss"></style>

{
  rules: {
    'at-rule-no-unknown': null,
    'selector-pseudo-element-no-unknown': [
      true,
      {
        ignorePseudoElements: ['v-deep'],
      },
    ],
  },
}

export type Post = {
  id: number
  title: string
  desc: string
  file: string
  img: string
}

import { Post } from './Post'
export default [
  {
    id: 1,
    title: 'Post 1',
    desc:
      'A short description of the post to keep the user interested.' +
      ' Description can be of different lengths, blocks are aligned' +
      ' to the height of the block with the longest description',
    file: 'content/posts/1.md',
    img: 'assets/images/1.svg',
  },
  ...
  {
    id: 5,
    title: 'Post 5',
    desc:
      'A short description of the post to keep the user interested.' +
      ' Description can be of different lengths, blocks are aligned' +
      ' to the height of the block with the longest description',
    file: 'content/posts/5.md',
    img: 'assets/images/5.svg',
  },
] as Post[]

import Vue from 'vue'
export const methods = {
  getDynamicFile(name: string) {
    return require(`@/${name}`)
},
}
Vue.mixin({
  methods,
})

{
  plugins: [
    '~plugins/mixins/getDynamicFile.ts',
  ],
}

@font-face {
  font-family: "Rubik-Regular";
  font-weight: normal;
  font-style: normal;
  font-display: swap;
  src:
    local("Rubik"),
    local("Rubik-Regular"),
    local("Rubik Regular"),
    url("/fonts/Rubik-Regular.woff2") format("woff2"),
    url("/fonts/Rubik-Regular.woff") format("woff");
}
...

{
  head: {
    link: [
      {
        as: 'style',
        rel: 'stylesheet preload prefetch',
        href: '/fonts/fonts.css',
      },
    ],
  },
}

npm i @nuxtjs/style-resources

{
  modules: [
    '@nuxtjs/style-resources',
  ],
  styleResources: {
    scss: ['./assets/styles/variables.scss'],
  },
}

{
  css: ['~assets/styles/global'],
}

npm i reset-css

{
  css: [
    '~assets/styles/global',
    'reset-css/reset.css',
  ],
}

<template lang="pug">
div
  nuxt
  db-footer
</template>

<script lang="ts">
import Vue from 'vue'
type Error = {
  statusCode: number
  message: string
}
type ErrorText = {
  title: string
  subtitle: string
}
type ErrorTexts = {
  [key: number]: ErrorText
  default: ErrorText
}
export default Vue.extend({
  name: 'ErrorPage',
  props: {
    error: {
      type: Object as () => Error,
      required: true,
    },
  },
  data: () => ({
    texts: {
      404: {
        title: '404. Page not found',
        subtitle: 'Something went wrong, no such address exists',
      },
      default: {
        title: 'Unknown error',
        subtitle: 'Something went wrong, but we`ll try to figure out what`s wrong',
      },
    } as ErrorTexts,
  }),
  computed: {
    errorText(): ErrorText {
      const { statusCode } = this.error
      return this.texts[statusCode] || this.texts.default
    },
  },
})
</script>

<template lang="pug">
section.section
  .content
    .ep__container
      section-header(
        :title="errorText.title"
        :subtitle="errorText.subtitle"
      )
      nuxt-link.ep__link(
        class="primary"
        to="/"
      ) Home page
</template>

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  name: 'SectionHeader',
  props: {
    title: {
      type: String,
      required: true,
    },
    subtitle: {
      type: String,
      default: '',
    },
  },
})
</script>

<template lang="pug">
section.section
  .content
    h1.sh__title(
      class="h1"
    ) {{ title }}
    p.sh__subtitle(
      v-if="subtitle"
      class="body2 regular"
    ) {{ subtitle }}
</template>

<template lang="pug">
section.section
  .content
    nuxt-link.lth__link(
      to="/"
      class="primary"
    )
      img.lth__link-icon(
        src="~/assets/icons/home.svg"
        alt="icon-home"
      )
      | Home
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  name: 'LinkToHome',
})
</script>

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  name: 'DbFooter',
  computed: {
    copyright(): string {
      const year = new Date().getUTCFullYear()
      return ` ${year} · All rights reserved`
    },
  },
})
</script>

<template lang="pug">
section.section
  .content
    .footer
      a.secondary(
        href="mailto:example@mail.com?subject=Nuxt blog"
      ) Contact us
      p.footer__copyright(
        class="body3 regular"
      ) {{ copyright }}
</template>

<script lang="ts">
import Vue from 'vue'
import { Post } from '~/content/Post'
export default Vue.extend({
  name: 'PostCard',
  props: {
    post: {
      type: Object as () => Post,
      required: true,
    },
  },
  computed: {
    pageUrl(): string {
      return `/post/${this.post.id}`
    },
  },
})
</script>

<template lang="pug">
nuxt-link.pc(:to="pageUrl")
  img.pc__img(
    :src="getDynamicFile(post.img)"
    :alt="`post-image-${post.id}`"
  )
  p.pc__title(class="body1 medium") {{ post.title }}
  p.pc__subtitle(class="body3 regular") {{ post.desc }}
</template>

<script lang="ts">
import Vue from 'vue'
import posts from '~/content/posts'
export default Vue.extend({
  name: 'PostList',
  data: () => ({
    posts,
  }),
})
</script>

<template lang="pug">
section.section
  .content
    p.pl__count(class="body2 regular")
      img.pl__count-icon(
        src="~/assets/icons/list.svg"
        alt="icon-list"
      )
      | Total {{ posts.length }} posts
    .pl__items
      post-card(
        v-for="post in posts"
        :key="post.id"
        :post="post"
      )
</template>

npm i @nuxtjs/markdownit

{
  modules:  [
    '@nuxtjs/markdownit',
  ],
}

<script lang="ts">
import Vue from 'vue'
import { Post } from '~/content/Post'
export default Vue.extend({
  name: 'PostFull',
  props: {
    post: {
      type: Object as () => Post,
      required: true,
    },
  },
})
</script>

<template lang="pug">
section.section
  .content
    img.pf__image(
      :src="getDynamicFile(post.img)"
      :alt="`post-image-${post.id}`"
    )
    .pf__md(v-html="getDynamicFile(post.file).default")
</template>

<template lang="pug">
.page
  section-header(
    title="Nuxt blog"
    subtitle="The best blog you can find on the global internet"
  )
  post-list
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  name: 'HomePage',
})
</script>

<script lang="ts">
import Vue from 'vue'
import { Post } from '~/content/Post'
import posts from '~/content/posts'
export default Vue.extend({
  validate({ params }) {
    return /^\d+$/.test(params.id)
  },
  computed: {
    currentId(): number {
      return Number(this.$route.params.id)
    },
    currentPost(): Post | undefined {
      return posts.find(({ id }) => id === this.currentId)
    },
  },
})
</script>

<template lang="pug">
.page
  link-to-home
  section-header(
    :title="currentPost.title"
  )
  post-full(
    :post="currentPost"
  )
</template>