How to build a static blog part 5

Wednesday, 5 July 2023

Packages

OK so time to add some dependencies. I've split them up here rather than doing them all in one go. The tooling is handy for spotting errors and keeping the code nice and tidy, but totally optional. If you do add them, there is some config required, which you can customise to enforce your own code style preferences.

Don't forget that if this is way too much code copying, you can just clone down the finished project here on Github.

Some Nuxt plugins, which we are using to handle formatting the blog posts, detecting the user's colour mode preferences, and providing some icons:

yarn add @nuxt/content @nuxtjs/color-mode nuxt-icon

Tailwind packages we use for our styles:

yarn add -D @nuxtjs/tailwindcss @tailwindcss/forms @tailwindcss/typography

Linting and tooling (optional):

yarn add -D eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-prettier eslint-plugin-prettier-vue eslint-plugin-vue prettier

Config for the above optional linting and tooling:

create a file called .eslintrc.js and paste in the following code.

module.exports = {
    extends: [
        'plugin:vue/recommended',
        'plugin:prettier-vue/recommended',
        'plugin:@typescript-eslint/recommended',
    ],
    parser: '@typescript-eslint/parser',
    plugins: ['@typescript-eslint'],
    root: true,
    settings: {
        'prettier-vue': {
            SFCBlocks: {
                customBlocks: {
                    docs: { lang: 'markdown' },
                    config: { lang: 'json' },
                    module: { lang: 'js' },
                    comments: false,
                },
            },
        },
        usePrettierrc: true,
        fileInfoOptions: {
            withNodeModules: false,
        },
    },
    rules: {
        'prettier-vue/prettier': ['error'],
        'vue/multi-word-component-names': [
            'error',
            {
                ignores: ['index', 'default', '[...slug]', '[...404]'],
            },
        ],
    },
    parserOptions: {
        ecmaVersion: 'latest',
    },
}

Create a file called .prettierrc and paste in the following:

{
    "singleQuote": true,
    "semi": false,
    "trailingComma": "es5",
    "tabWidth": 4,
    "useTabs": true
}

Now we need to add some more configuration to our nuxt.config.ts, in order to use the packages we just added.

import { defineNuxtConfig } from 'nuxt/config'
export default defineNuxtConfig({
    modules: [
        '@nuxtjs/tailwindcss',
        '@tailwindcss/typography',
        '@nuxtjs/color-mode',
        'nuxt-icon',
        '@nuxt/content',
    ],
    colorMode: {
        // Get Nuxt color-mode to work with Tailwind classes
        classSuffix: '',
    },
    tailwindcss: {
        // add '~tailwind.config` alias
        exposeConfig: true,
    },
    content: {
        // A theme for embedded code in our content.
        // See the Nuxt Content docs for more
        highlight: {
            theme: 'github-dark',
        },
    },
})

We need to add some settings to our Tailwind CSS as well. Then we are done with the configurations!

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
        'components/**/*.{vue,js,ts}',
        'layouts/**/*.vue',
        'pages/**/*.vue',
        'composables/**/*.{js,ts}',
        'plugins/**/*.{js,ts}',
        'App.{js,ts,vue}',
        'app.{js,ts,vue}',
        'Error.{js,ts,vue}',
        'error.{js,ts,vue}',
        'content/**/*.md',
    ],
    theme: {
        extend: {
            typography: {
                DEFAULT: {
                    css: {
                        'code::before': {
                            content: '""',
                        },
                        'code::after': {
                            content: '""',
                        },
                    },
                },
            },
            colors: {},
            fontFamily: {
                sans: ["'Inter'", 'sans-serif'],
            },
        },
    },
    darkMode: 'class',
    plugins: [
        require('@tailwindcss/typography'),
        require('@tailwindcss/forms'),
    ],
}

That's our dependencies set up, now we can start building our Nuxt3 powered blog.

go back