管理画面テンプレートCoreUI の Nuxt.js 向けテンプレートを公開しました

管理画面向けテンプレートとして有名な CoreUI のNuxt.js 向けテンプレートを公開しました。

GitHub – chatbox-inc/coreui-free-nuxt-admin-template

CoreUI は Vue.js 向けにテンプレートの公開されている 管理画面向けのテンプレートですが、上記のリポジトリはこれを Nuxt.js 向けに展開したものになります。

以下にその簡単な作業記録をまとめておきます。

CoreUI を Nuxt.js 向けに展開する

まずは、 vue-cli で テンプレートを作成します。

$ vue init nuxt-community/starter-template my-nuxt-app

GitHub – coreui/coreui-free-vue-admin-template: CoreUI Vue is free Vue admin template based on Bootstrap 4のVue.js 向けテンプレートから 以下の内容を本体にコピーします。

  • src/views の内容を pages
  • package.json の依存モジュールを追加
  • src/_nav.js を プロジェクトルートに
  • public/imgstatic/img
  • src/assets/scssassets/scss/coreui
  • src/containerslayouts

layout/DefaultContainer.vuelayout/default.vue に rename します。

assets/scss/coreui.scss を作成し以下を追記します。

@import '@coreui/icons/css/coreui-icons.min.css';
/* Import Font Awesome Icons Set */
$fa-font-path: '~font-awesome/fonts/';
@import 'font-awesome/scss/font-awesome.scss';
/* Import Simple Line Icons Set */
$simple-line-font-path: '~simple-line-icons/fonts/';
@import 'simple-line-icons/scss/simple-line-icons.scss';
/* Import Flag Icons Set */
@import 'flag-icon-css/css/flag-icon.min.css';
/* Import Bootstrap Vue Styles */
@import 'bootstrap-vue/dist/bootstrap-vue.css';
// Import Main styles for this application
@import './coreui/style';

nuxt.config.js に以下を追記して SPA モードに切り替えます。

{
  mode: "spa",
  ...
  css: [
    "~assets/scss/coreui.scss",
  ],

  ...
  modules: [
    ['bootstrap-vue/nuxt', { css: false }],
  ]
}

最後に npm run dev を実行して 完了です。

$ npm run dev

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です