フロントエンドで利用するVue.jsをNuxt.jsのように使いやすくする

技術ブログを自社ホームページに作成していきます。エンジニアの朝野(トモノ)です。

フロントエンドとバックエンドを主に担当すること15年程度になります。

さて今回は、素のVue.jsをNuxt.jsのように使いやすくできればと設定を導入した備忘録となります。

Laravelのプロジェクトを作成する際、バックエンドはLaravelで、フロントエンドはVue.jsを選択することも多く取られる選択肢ではないでしょうか。

LaravelのEloquant ORMはとても便利で使いやすいも、フロントエンド側をSPAで実装しようとすると、どうしてもLivewireよりもJSで実装したほうがやりやすく感じます。

そこで、Vue.jsを導入しようとするも、ほかの開発現場でNuxt.jsを使っていたりすると、素のVue.jsではいろいろと不便を感じることがあります。

Laravelをバックエンドとして切り分け、フロントエンド側はNuxt.jsでディレクトリを分けてしまう方法でも良いのですが、管理が煩雑になってしまいます。

そこで、あくまでLaravelのフォルダの下で、素のVue.jsを用いて、Nuxt.jsの使用感に近づけるために導入する方法を紹介します。

Nuxt.jsの使いやすい部分

Nuxt.jsの使いやすい部分と言えば、

・pagesフォルダにファイルを設置すれば反映されるルーティング

・componentsフォルダに設置したコンポーネントはimportいらずで利用できる

・ref、onMounted等のよく使う関数がimportいらずで利用できる

このあたりがまず強力な部分ではないでしょうか。

素のvue.jsに導入していきます。

unplugin-vue-router

指定したフォルダ下にファイルを作ることで自動でルーティングを作成してくれます。

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

上記のようにファイルを設置すると、

- https://xxxxxxx/
- https://xxxxxxx/users
- https://xxxxxxx/users/1

といった具合に自動的にルーティングが作成されます。

Laravelにて導入する場合、まずpackageをインストールします。

npm i -D unplugin-vue-router

vite.config.jsに下記を追記します。

import VueRouter from 'unplugin-vue-router/vite'

export default defineConfig({
  ...
  plugins: [
    VueRouter({
      routesFolder: 'resources/js/pages',
    }),
  ...
})

設定に関しては下記を参照してください。

https://github.com/posva/unplugin-vue-router

unplugin-vue-components

template句にてcomponentのインポートする際に、scriptにimport文を記述せずに自動的にインポートをするためのプラグインです。

/domain
  - users
    - list.vue

のようなファイルを設置した時、下記のようにimport文を記載せずに自動的にコンポーネントの名前を解決してくれます。

<template>
  <domain-users-list/>
</template>

こちらも同様に、まずnpmにてインストールします。

npm i unplugin-vue-components -D

次にvite.config.jsに下記を追記していきます。

tsで使用する場合は、dts:trueを追記する必要があります。

import Components from 'unplugin-vue-components/vite'

export default defineConfig({
  ...
    Components({
      dirs: ['resources/js/components'],
      deep: true,
      directoryAsNamespace: true,
    }),
  ...
})

新しいファイルを作成した際はnpmを一度再起動する必要はあります。

https://github.com/unplugin/unplugin-vue-components

unplugin-auto-import

refやcomputed、onMounted等のVue.jsの関数や、piniaの状態管理などの多様するものを、importなく使用できるようにできます。

npm i -D unplugin-auto-import

vite.config.jsに下記のように追記していきます。フォルダや、必要なimport等の設定は見直してください。

import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
  plugins: [
  ...
    AutoImport({
      include: [/\.[tj]sx?$/, /\.vue$/, /\.vue\?vue/, /\.md$/],
      imports: ['vue', 'pinia', 'vee-validate', VueRouterAutoImports],
      dirs: [
        'resources/js/store/**',
        'resources/js/utils/**',
        'resources/js/repositories/**',
        'resources/js/types/**',
        'resources/js/plugins/**',
      ],
      eslintrc: {
        enabled: true,
      },
    }),
  ...
  ]
})

これにより、onMounted等よく使う関数を、import無しで使用ができるようになります。

また、pluginとして作成した関数なども、自動的にインポートされるようになります。

Webシステム開発はTHIRD HERO

Webシステム開発でお困りの方はお問い合わせください。

こうしたサイトを作りたいんだけど…

この機能をもっと便利にしたい！

人手が足りない

お気軽にお問い合わせください。