Vue & TypeScriptの既存プロジェクトにCoreUIテンプレートを組み込む

作業途中だけどメモしておきます。

管理画面テンプレートのCoreUIのコンポーネントを既存Vue(TS)なプロジェクトで利用可能にする。まで。

一から作る場合は、https://github.com/coreui/coreui-free-vue-admin-template のプロジェクトをcloneなんかしてカスタマイズ、TS化するのが簡単なんだろうけど、すでにプロジェクトとして成果物がある場合で、CoreUIのコンポーネントを組み込んで行きたいってケース。

このリポジトリからコンポーネントを取り込むことができる。

https://github.com/coreui/coreui-vue

CoreUIのインストール

手順は以下のマニュアルを参考にした。

https://coreui.io/vue/docs/introduction/

$ npm install @coreui/vue @coreui/coreui

CoreUIコンポーネントのimport

CoreUIコンポーネントをVueインスタンスに渡す。 アプリケーションのルートディレクトリにplugins/coreui.tsファイルを作成し、以下のように記述。

import Vue from "vue";
import CoreUI from "@coreui/vue";

Vue.use(CoreUI);

main.tsで定義したcoreui.tsを呼び出す。

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import "../plugins/coreui";

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");

CoreUIコンポーネントの確認

上記のように記述するとVueコンポーネントからcoreui-vueで定義されているコンポーネントを参照できる。

App.vue

<template>
  <div id="app">
    <div>
      <CCard>
        <CCardHeader>
          カードのタイトル
          <div class="card-header-actions">
            <a
              href="https://coreui.io/vue/docs/components/card-components"
              class="card-header-action"
              rel="noreferrer noopener"
              target="_blank">
              <small class="text-muted">docs</small>
            </a>
          </div>
        </CCardHeader>
        <CCardBody>
          カードの内容
        </CCardBody>
      </CCard>
    </div>
  </div>
</template>

のように記述してみるとエラーなく、CCardコンポーネントがレンダリングされる。

CoreUIのスタイルを適用する

しかしながら、CoreUIのスタイルの適用が出来ていないので、CoreUIのscssをグローバルに適用させる。

webpack.jsがある場合はwebpack.jsに、なければvue.config.jsを作成または編集する。

vue.config.js

module.exports = {
  css: {
    loaderOptions: {
      scss: {
        prependData: '@import "~@coreui/coreui/scss/coreui";'
      }
    }
  }
};

以上でスタイルの適用を確認できる。