● nuxt3 + typescript + vuetifyのインストール

npx nuxi init my-app
cd my-app
yarn install

yarn add vuetify@next mdi
yarn add -D sass

npx で実行するのは nuxi です。

● tsx を使用可能にする

tsconfig.json に "jsx": "preserve" を追加します

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

● app.vue を tsx で記述する

pages/hoge.vue

<template>
  <div>
    <h1>hoge</h1>
    <p>hogeページです</p>
  </div>
</template>

　↓ tsx を使うと以下のように記述することができます

<script lang="tsx">
export default defineComponent({
  render() {
    return (
        <div>
          <h1>hoge</h1>
          <p>hogeページです</p>
        </div>
    )
  }
})
</script>

React開発者を Vue3 に取り込むことができます。

参考 : https://tech.andpad.co.jp/entry/2021/07/01/170000

● nuxt3 の useStateでグローバルかつページ遷移しても消えない状態管理

composable/useCounter.ts

import type { Ref } from 'vue'
export const inc = (counter: Ref<number>) => () => counter.value++
export const dec = (counter: Ref<number>) => () => counter.value--

export const useSharedCounter = () => {

  // ページ遷移で消えてもいい場合はこちら
  const counter = ref(0)

  // ページ遷移でも値を保持したい場合はこちら。ただし第一引数の key はユニークであること
  const counter = useState('counter', () => (0))

  return {
    counter: readonly(counter),
    dec: dec(counter),
    inc: inc(counter),
  }
}

/pages/sample.vue

<template>
    <div>
      <h1>カウンター: {{ counter }}</h1>
      <button @click="dec" style="width: 28px; height: 28px; border: 1px solid red;"> - </button>
      <button @click="inc" style="width: 28px; height: 28px; border: 1px solid red;"> + </button>
    </div>
</template>

<script setup lang="ts">
const { counter, inc, dec } = useSharedCounter()
</script>

引用元 : https://zenn.dev/coedo/articles/use-state-nuxt3