Getting started with Nuxt 3

pnpm dlx nuxi init nuxt-app

pnpm i

pnpm run dev

 ERROR  Failed to resolve import "ufo" ...
 ERROR  Failed to resolve import "vue" ...

pnpm add -D ufo vue

pnpm run dev

pnpm run build

import { defineNuxtConfig } from "nuxt"

export default defineNuxtConfig({
  srcDir: "src/"
})

pnpm add -D tailwindcss @nuxtjs/tailwindcss

export default defineNuxtConfig({
  modules: ["@nuxtjs/tailwindcss"],
  ...
})

import { Config } from "tailwindcss"

export default <Config>{
  theme: {
    extend: {}
  },
}

pnpm add -D eslint eslint-plugin-vue @vue/eslint-config-typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin

env:
  browser: true
extends:
  - plugin:vue/vue3-recommended
  - eslint:recommended
  - "@vue/typescript/recommended"
parser: vue-eslint-parser
parserOptions:
  parser: "@typescript-eslint/parser"
  sourceType: module
plugins:
  - vue
  - "@typescript-eslint"
rules: {}

{
  "editor.tabSize": 2,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
  },
}

pnpm add -D prettier eslint-config-prettier eslint-plugin-prettier

...
extends:
  - plugin:vue/vue3-recommended
  - eslint:recommended
  - "@vue/typescript/recommended"
+  - plugin:prettier/recommended
...

.
├── pages
│   ├── index.vue
│   └── about.vue
└── etc..

ℹ Prerendering 2 initial routes with crawler
  ├─ /about (undefinedms) (ReferenceError: Response is not defined)
  ├─ / (undefinedms) (ReferenceError: Response is not defined

ℹ Prerendering 2 initial routes with crawler
  ├─ /about (78ms)
  ├─ / (12ms)

name: Deploy to GitHub Pages

on:
  # Runs on pushes targeting the default branch
  push:
    branches: ["main"]

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions:
  contents: read
  pages: write
  id-token: write

# Allow one concurrent deployment
concurrency:
  group: "pages"
  cancel-in-progress: true

jobs:
  # Build job
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v3
      - name: Setup Node
        uses: actions/setup-node@v3
        with:
          node-version: "16"
      - name: Setup Pages
        id: pages
        uses: actions/configure-pages@v1
      - name: Install dependencies
        run: npm i
      - name: Static HTML export with Nuxt
        run: NUXT_APP_CDN_URL=https://kazuhe.github.io/ npm run generate
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v1
        with:
          path: ./dist

  # Deployment job
  deploy:
    permissions:
      pages: write
      id-token: write
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    needs: build
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v1

npm i -D @nuxt/content

export default defineNuxtConfig({
  modules: [..."@nuxt/content"],
  ...
});

---
title: 'index page'
description: 'トップページです'
---

# Top page

- list
- list2

---
title: 'about page'
description: 'foo'
---

# タイトル

テキストテキストテキストテキストテキスト

<template>
  <div>
    <p>{{ $route.params.slug }}</p>
    <ContentDoc />
  </div>
</template>

Document not found, overwrite this content with #not-found slot in <ContentDoc>.

export default defineNuxtConfig({
  modules: ["@nuxt/content", "@nuxtjs/tailwindcss"],
  srcDir: "src/",
  /**
   * @nuxt/content
   *
   * https://content.nuxtjs.org/api/configuration
   */
  content: {
    sources: [path.join(__dirname, "content")],
  },
});

npm i -D rss-parser

<script setup lang="ts">
import Parser from "rss-parser";
import { Blog } from "@/domain/blog";
import BlogCard from "@/components/BlogCard.vue";

/**
 * zenn の RSS からコンテンツを取得する
 */
const fetchZennContent = (): Promise<Blog[]> =>
  Promise.resolve(
    new Parser()
      .parseURL("https://zenn.dev/kazuhe/feed?all=1&include_scraps=1")
      .then((res) =>
        res.items.map((d) => ({
          title: d.title,
          description: d.content,
          path: d.link,
          createdAt: d.pubDate,
          icon: "z",
          type: "zenn",
        }))
      )
  );

/**
 * `/content` からコンテンツを取得する
 */
const fetchOwnContent = (): Promise<Blog[]> =>
  queryContent("blog")
    .find()
    .then((res) =>
      res.map((d) => ({
        title: d.title,
        description: d.description,
        path: d._path,
        createdAt: d.created_at,
        icon: d.icon,
        type: "own",
      }))
    );

type Sort<T> = ([a, b]: [T[], T[]]) => T[];

/**
 * Blog を最新順に並び替える
 */
const sortBlogs: Sort<Blog> = ([a, b]) =>
  a.concat(b).sort((a, b) => Date.parse(b.createdAt) - Date.parse(a.createdAt));

const { data: blogs } = await useAsyncData("blogs", () =>
  Promise.all([fetchZennContent(), fetchOwnContent()]).then(sortBlogs)
);
</script>

<template>
  <div>
    <ul>
      <li v-for="blog in blogs" :key="blog.path" class="mt-3 hover:opacity-60">
        <blog-card
          :title="blog.title"
          :description="blog.description"
          :path="blog.path"
          :created-at="blog.createdAt"
          :icon="blog.icon"
          :type="blog.type"
        />
      </li>
    </ul>
  </div>
</template>