CoreUIを既存のNuxtプロジェクトに導入したメモ

前提条件

npx create-nuxt-app
で既に作成されたnuxtプロジェクトがありました。
一部、ディレクトリ構成などがカスタマイズされており、
新規プロジェクトとして作成することが難しかった。

STEP0 準備 テンポラリのプロジェクトを作成

https://github.com/muhibbudins/nuxt-coreui
ここからソースを取得する。

vue-cliが必要なのでインストールしておく。

yarn global add @vue/cli

nuxt-coreuiインストール

vue init muhibbudins/nuxt-coreui my-project 
yarn install
yarn dev

localhost:3000にアクセスし確認する。

STEP1 必要なモジュールを取得する。

既存のpackage.jsonとインストールしたnuxt-coreuiのpackage.jsonを比較する。

  "dependencies": {
    "@nuxtjs/style-resources": "^0.1.1",
    "chart.js": "^2.7.1",
    "flag-icon-css": "^2.9.0",
    "font-awesome": "^4.7.0",
    "simple-line-icons": "^2.4.1",
    "vue-chartjs": "^3.1.1"
  },

この辺りが不足していた
node-sass, sass-loader, boorstrap-vueは既存プロジェクトに入っていた
chart系は今回利用しないので、それ以外をpackage.jsonに追記

yarn install

STEP2 コンポーネント、SCSSのコピー

インストールしたnuxtーcoreuiプロジェクトのcomponentsのcharts以外のファイルとディレクトリを
既存のプロジェクトのcomponentsの中にコピーする。

インストールしたnuxtーcoreuiプロジェクトのassetsのファイルとディレクトリを
既存のプロジェクトのassetsの中にコピーする。

同様に進めるが、layouts, pages, staticはdefault.vueなど既存のファイルと名前が衝突しがちなので気をつける。
衝突したらdefault-coreui.vueなどと変更して保存しておく。

STEP3 設定の変更

cssのビルドが通るように nuxt.config.jsを変更する。

  css: [
    /* Import Font Awesome Icons Set */
    '~/node_modules/flag-icon-css/css/flag-icon.min.css',
    /* Import Font Awesome Icons Set */
    '~/node_modules/font-awesome/css/font-awesome.min.css',
    /* Import Simple Line Icons Set */
    '~/node_modules/simple-line-icons/css/simple-line-icons.css',
    /* Import Bootstrap Vue Styles */
    '~/node_modules/bootstrap-vue/dist/bootstrap-vue.css',
    /* Import Core SCSS */
    { src: '~/assets/scss/style.scss', lang: 'scss' }
  ],

これで yarn devし、localhost:3000/register などを見てみる。
うまく表示されていたら、既存のページにcore-uiのコンポーネントをimportして利用することが可能。