はじめに

Nuxt + Typescriptでアプリケーションを開発している際、device毎（PC, スマホ）で表示するlayoutをそれぞれ分けて作成・表示したかったため、そのために行った内容をまとめます。

環境

Nuxt.js 2.8.1
Node.js 8.11.4
npm 6.4.0

ディレクトリ構成

├── .nuxt
├── node_modules
├── src
│   ├── layouts
│   │   ├── pc
│   │   │   └── default.vue
│   │   └── sp
│   │       └── default.vue
│   ├── pages
│   │   ├── pc
│   │   │   └── index.vue
│   │   └── sp
│   │       └── index.vue
│   ├── server
│   │   └── index.ts
│   └── router.ts
├── nuxt.config.ts
├── package-lock.json
└── package.json

※関連するディレクトリ・ファイルのみ表示

routerをカスタマイズ

Nuxtのrouterをカスタマイズするにあたってnuxt-community/router-moduleというモジュールを利用します。
https://github.com/nuxt-community/router-module
このモジュールは独自のrouterを実装することで、Nuxtアプリケーションのroutingをカスタマイズすることを可能とします。

Use your own router.js to handle your routes into your Nuxt.js application.

router-moduleのインストール

以下のコマンドにてモジュールをインストール。

$ npm install --save @nuxtjs/router

router.tsを作成

インストールが完了したらsrcDirに独自のrouterを作成します。
今回はTypescriptでアプリケーションの開発を行っているため、router.tsを作成しました。

src/router.ts

/* eslint @typescript-eslint/no-explicit-any: 0 */
import Vue from 'vue';
import Router, { RouteConfig } from 'vue-router';
import { createRouter as createDefaultRouter } from '~~/.nuxt/defaultRouter.js';

Vue.use(Router);

const fixRoutes = (
  defaultRoutes: RouteConfig[],
  isMobile: boolean,
): RouteConfig[] => {
  const regex = isMobile ? /^\/sp\/?/ : /^\/pc\/?/;

  return defaultRoutes
    .filter((route: RouteConfig): boolean => regex.test(route.path))
    .map(
      (route: RouteConfig): RouteConfig => ({
        ...route,
        path: route.path.replace(regex, '/'),
      }),
    );
};

export const createRouter = (ssrContext: Record<string, any>): Router => {
  const defaultRouter: Record<string, any> = createDefaultRouter();
  // TODO：mobile判定は後で実装するため、一旦固定でmobile判定
  const isMobile = true;

  return new Router({
    ...defaultRouter.options,
    routes: fixRoutes(defaultRouter.options.routes, isMobile),
  });
};

router.tsではNuxtで生成されたdefaultRouter.jsを再利用することでカスタマイズしております。（defaultRouter.jsの生成方法については後述）
実装したfixRoutes関数では、引数として渡されたmobile判定情報を元にspもしくはpcディレクトリのどちらかをroutingのpathとして採用し、defaultのroute情報をベースとして新たなrouteを生成します。
それにより、device毎それぞれ別々のroutingが生成され、PCでアクセスした際は/pages/pc/を、スマホでアクセスした際は/pages/sp/を表示することが可能となります。

また、device判定の実装については後述とし、ここでは一旦固定で定義しています。

modulesの設定を追加

router.tsを作成したらnuxt.config.tsのmodulesに@nuxtjs/routerの設定を追加します。

nuxt.config.ts

// ・・・省略
const nuxtConfig: NuxtConfiguration = {
  mode: 'universal',
  srcDir: 'src/',
  // ・・・省略
  modules: [
    ['@nuxtjs/router', { fileName: 'router.ts', keepDefaultRouter: true }],
  ],
  // ・・・省略

optionsとしてはpathとfileName、keepDefaultRouterの指定が可能です。
fileNameに関してはdefault値がrouter.jsなため、今回はtsファイル（router.ts）を指定。
keepDefaultRouterはtrueを設定すると.nuxtディレクトリにdefaultRouter.jsとしてNuxtのデフォルトrouterが保持され、独自に作成したrouterからアクセスし再利用することが可能となります。

deviceの判定

routerのカスタマイズまで完了したら、次にdeviceの判定処理を実装します。
deviceの判定にはhgoebl/mobile-detect.jsというライブラリを利用しました。
https://github.com/hgoebl/mobile-detect.js

このライブラリはUserAgentをもとに、deviceの判定を行います。

mobile-detect.jsのインストール

$ npm install --save mobile-detect

deviceの判定処理実装

インストールが完了したら最後にTODOとしていたdeviceの判定処理を実装します。