Installing Nuxt 3, Tailwind CSS, and Nuxt Content Module

Nuxt 3

[ Describe why I choose nuxt over mkdocs ]

Prerequisite

Node.js 18.0

[ Explain node ]

Installation

[ Access terminal in vscode ] Ctrl + ~

npx nuxi@latest init --cwd
(shopt -s dotglob; mv ./nuxt-app/* ./; rmdir ./nuxt-app)
npm run dev

Tailwind CSS

[ Describe briefly what tailwind is ]

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

[ Tell tailwind where to look for classes ]

// tailwind.config.js
content: [
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
],

[ Create main.css ]

// assets/css/main.css
@tailwind base;
@tailwind components;
@tailwind utilities;

[ tell nuxt we are using tailwind ]

// nuxt.config.ts
css: ['~/assets/css/main.css'],
postcss: {
    plugins: {
        'tailwindcss/nesting': {},
        tailwindcss: {},
        autoprefixer: {}
    }
}

Setting up project

[ Explain briefly how nuxt work ]

Remove app.vue

Create pages directory (nuxt will automatically create routing)

Create layouts directory

Install Nuxt Content Module

[ Explain benefit of markdown ]

npx nuxi module add content

[ Tell nuxt we are using content module ]

// nuxt.config.ts
modules: ['@nuxt/content'],

Add [...slug].vue file inside pages directory.

Create content/assignments/week01.md file and write down your week 01 documentation in markdown format.

<!-- content/assignments/week01.md -->

# Week 01

Documentation for week 01

[ add content-doc class & style ]

[ You can add classes in markdown ]

// tailwind.config.js
content: [
    "./content/**/*.md",
    ...
],

Setting Up CI for Nuxt

[ explain the concept of static site generator ]

npm run generate

GitLab page CI require public directory (change generate from dist to public, change public to static, in nuxt.config.ts)

// nuxt.config.ts
export default defineNuxtConfig({
    dir: {
        // this is to prevent conflict with GitLab pages, which requires
        // the build output to be in the `./public` folder.
        public: 'static'
    },
    nitro: {
        output: {
            // place static output in the ./public folder, for GitLab
            // pages to pick up
            publicDir: 'public'
        }
    }
})

Replace content of .gitlab-ci.yml

// .gitlab-ci.yml
image: node

before_script:
- npm install

cache:
paths:
    - node_modules/

pages:
script:
    - npm run generate
artifacts:
    paths:
    - public
rules:
    - if: '$CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH'