Nuxt3の素振り

npx nuxi init nuxt-app-20220602

 🎉  Another grand Nuxt project just made! Next steps:

     📁  `cd nuxt-app-20220602`

     💿  Install dependencies with `npm install` or `yarn install` or `pnpm install --shamefully-hoist`

     🚀  Start development server with `npm run dev` or `yarn dev` or `pnpm run dev

tree -L 3 -I node_modules
.
├── README.md
├── app.vue
├── nuxt.config.ts
├── package.json
├── tsconfig.json
└── yarn.lock

{
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview"
  },
  "devDependencies": {
    "nuxt": "3.0.0-rc.3"
  }
}

yarn dev -o

Nuxt CLI v3.0.0-rc.3                                                                            08:20:16
Usage: npx nuxi dev|build|preview|start|analyze|generate|prepare|typecheck|usage|info|init|create|upgrade|test|add|new [args]

Use npx nuxi [command] --help to see help for each command                                      08:20:16

✨  Done in 0.17s.

<script setup>
  import { ref, computed } from '#imports'

  const count = ref(1)
  const double = computed(() => count.value * 2)
</script>

yarn nuxi typecheck
yarn run v1.22.19
$ /Users/yuki/Src/frameworks/nuxt/nuxt-app-20220602/node_modules/.bin/nuxi typecheck
Nuxt CLI v3.0.0-rc.3                                                                            08:36:50
Need to install the following packages:
  typescript
  vue-tsc
Ok to proceed? (y) y
app.vue:3:6 - error TS2322: Type '{}' is not assignable to type 'IntrinsicAttributes & Partial<{}> & Omit<Readonly<ExtractPropTypes<{}>> & VNodeProps & AllowedComponentProps & ComponentCustomProps, never> & Readonly<...>'.
  Type '{}' is missing the following properties from type 'Readonly<ExtractPropTypes<{ appName: { type: StringConstructor; default: string; }; version: { type: StringConstructor; default: string; }; title: { type: StringConstructor; default: string; }; readDocs: { ...; }; followTwitter: { ...; }; starGitHub: { ...; }; }>>': version, title, appName, readDocs, and 2 more.

3     <NuxtWelcome />
       ~~~~~~~~~~~


Found 1 error in app.vue:3


 ERROR  Command failed with exit code 2: npx -p vue-tsc -p typescript vue-tsc --noEmit          08:37:01

  at makeError (node_modules/nuxi/dist/chunks/index5.mjs:1242:11)
  at handlePromise (node_modules/nuxi/dist/chunks/index5.mjs:2071:26)
  at processTicksAndRejections (node:internal/process/task_queues:96:5)
  at async Object.invoke (node_modules/nuxi/dist/chunks/typecheck.mjs:43:7)
  at async _main (node_modules/nuxi/dist/cli.mjs:46:20)

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

export default defineNuxtConfig({
  typescript: {
    strict: true
  }
})

{
  // https://v3.nuxtjs.org/concepts/typescript
  "extends": "./.nuxt/tsconfig.json"
}

<template>
  <header>header!!!</header>
</template>

<template>
  <div>
    <TheHeader />
  </div>
</template>

<template>
  <div>
    <Sidebar />
    <ClientOnly>
      <!-- this component will only be rendered on client side -->
      <Comments />
      <template #fallback>
        <!-- this will be rendered on server side -->
        <p>Loading comments...</p>
      </template>
    </ClientOnly>
  </div>
</template>

<template>
  <h1>Index page</h1>
</template>

<template>
  <div>
    <NuxtPage />
  </div>
</template>

<template>
  <div>
    <!-- This page correctly has only one single root element -->
    Page content
  </div>
</template>

<template>
  <!-- This page will not render when route changes during client side navigation, because of this comment -->
  <div>Page content</div>
</template>

-| pages/
---| index.vue
---| users-[group]/
-----| [id].vue

<template>
  <p>{{ $route.params.group }} - {{ $route.params.id }}</p>
</template>