Nuxt.jsのpagesでコンポーネントを定義する方法（２パターン）

環境

• Nuxt.js
• Vue.jp

ディレクトリ構成

my-project/
├ components
│ └ OriginalDialog.vue
├ pages
│ └ index.vue
└ 以下省略

コンポーネント定義（パターン１）

よくみるコーディング

index.vue

<original-dialog ref="originalDialog" />

<script>
import OriginalDialog from '@/components/OriginalDialog'

export default {
  components: {
    OriginalDialog
  },
</script>

コンポーネント定義（パターン２）

すっきりしたコーディング

index.vue

<original-dialog ref="originalDialog" />

<script>
export default {
  components:{
    originalDialog: () => import('@/components/OriginalDialog'),
  }
</script>