nuxt2 と nuxt3 の対応関係について


nuxt2で開発しているプロジェクトをnuxt3に移行したいと思っています。  
nuxt2の下記のような実装は、nuxt3ではどのような実装に対応するのでしょうか？  
`<script setup lang="ts">` や vue3 の composition API を導入した形式で実装したいと考えています。

pagex/index.vue

[code]

    <script lang="ts">
    import HogeComponent from '~/path/to/component'
    @Component({
      components: {
        HogeComponent
      },
      async fetch(context: Context) {
        const { store, query, error } = context
        await store.dispatch('myStore/someImpl').catch()
      }
    }
    
    export default class Index extends Vue {
      created(): void { }
      get xxx(): boolean { }
      get yyy(): string { }
      setLoading() { }
      async change(arg: string) { }
    }
    </script>
    
[/code]




nuxt 3 をしばらく触っていないのですが、多分以下の感じになる気がしています。

[code]

    <script setup lang="ts" >
    
    // 勝手に template で使えるようになる。
    // ~/components に入れている場合は、 global 登録されるので不要になる。
    import HogeComponent from '~/path/to/component';
    
    // nuxt 3 で global store がほしい場合は、おそらく pinia を使うはず
    // ~/composables につっこんでおくと、同様にこの import は不要になる気がする。
    import useSomeStore from '~/path/to/composable';
    
    
    // created でやってたこともここで基本的には書ける。はず。
    
    const someStore = useSomeStore()
    await useAsyncData('someKey', () => {
      await someStore.someAction
    })
    
    const xxx = computed(() => {
      // reactive オブジェクトを参照して値を計算
    })
    const yyy = computed(() => {
      // reactive オブジェクトを参照して値を計算
    })
    
    // method は普通に定義する。
    const setLoading = () => {
      // reactive な変数の設定したりしたいはず。
    }
    
    // async method も同様。
    const change = async (arg: string) => {
    }
    </script>
    
[/code]

script setup で定義された値は template の方で利用可能になっていきます。  
reactivity を意識した、記述をしていくことになります。




nuxt 3 をしばらく触っていないのですが、多分以下の感じになる気がしています。

[code]

    <script setup lang="ts" >
    
    // 勝手に template で使えるようになる。
    // ~/components に入れている場合は、 global 登録されるので不要になる。
    import HogeComponent from '~/path/to/component';
    
    // nuxt 3 で global store がほしい場合は、おそらく pinia を使うはず
    // ~/composables につっこんでおくと、同様にこの import は不要になる気がする。
    import useSomeStore from '~/path/to/composable';
    
    
    // created でやってたこともここで基本的には書ける。はず。
    
    const someStore = useSomeStore()
    await useAsyncData('someKey', () => {
      await someStore.someAction
    })
    
    const xxx = computed(() => {
      // reactive オブジェクトを参照して値を計算
    })
    const yyy = computed(() => {
      // reactive オブジェクトを参照して値を計算
    })
    
    // method は普通に定義する。
    const setLoading = () => {
      // reactive な変数の設定したりしたいはず。
    }
    
    // async method も同様。
    const change = async (arg: string) => {
    }
    </script>
    
[/code]

script setup で定義された値は template の方で利用可能になっていきます。  
reactivity を意識した、記述をしていくことになります。

