nuxt3 + typescript + vuetify

● 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

● Composition API

Option APIの書き方

import Vue from "vue"
export default Vue.extend({
})

  ↓

<script lang="ts">
import { defineComponent } from "@vue/composition-api"
 
export default defineComponent({
  setup() {
    const { data: posts } = await useFetch('/api/posts')
  }
})
</script>

  ↓ setup() の糖衣構文が <script setup> になります。次のように記述できます。

<script setup lang="ts">
const { data: posts } = await useFetch('/api/posts')
</script>

引用 : https://zenn.dev/coedo/articles/86bc31acb4ea47

また script setup はライフサイクルでいうところの、beforeCreate と created のライフサイクルで実行されます

https://v3.ja.vuejs.org/guide/composition-api-lifecycle-hooks.html

引用 : https://bit.ly/3RXRoJ7

Composition API での従来の data は ref, reactive に置き換わります

data → ref, reactive
dataはComposition APIでrefあるいはreactiveで表現される。
refはプリミティブな値を管理し、reactiveはオブジェクトや配列を管理する。
そのため、reactiveの方が今までの使い方に近い。
ただし、refにオブジェクトや配列を渡すと、内部でreactiveが呼ばれるため問題なく使える。

https://nansystem.com/nuxt-composition-api-v2-diff/

ref , reactive の使い分け

特に使い分けるベストプラクティスがあるわけではなさそう(どちらでもご自由に。)

● ref
・プリミティブ、オブジェクト両方で使用できる
・refで定義したリアクティブな変数の値にアクセスするには.valueを使用する必要がある

● reactive
・プリミティブ値は受け取れない
・リアクティビティの消失に注意(refも同じだと思われるが。。。要検証)

https://kobatech-blog.com/vue-composition-api-ref-reactive/

● 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

No.2217
09/21 14:57

edit