この記事は

まだ Webpacker を使ったことがなかったので、今回 Webpacker で Vue.js を使った Rails プロジェクトを作成し、さらに Bootstrap および Bootswatch の任意のテーマを導入するところまで試してみました。

手順

Rails プロジェクトのディレクトリを作成します。この例では hidamarisou にします。

$ mkdir hidamarisou
$ cd hidamarisou

Gemfile を作成します。

Gemfile

source 'https://rubygems.org'

gem 'rails'
gem 'webpacker'

bundle install します。

$ bundle install --path vendor/bundle

rails new します。ターミナルで選択肢を訊かれたらすべて Y を選択します。

$ bundle exec rails new . --webpack=vue

Bootstrap と Bootswatch のパッケージをインストールします。

$ yarn add bootstrap bootswatch

Bootstrap の JavaScript ファイルを読み込みます。

app/javascript/packs/application.js

-console.log('Hello World from Webpacker')
+import 'bootstrap/dist/js/bootstrap';

Bootstrap と Bootswatch の Sass ファイルを読み込みます。なお、この例では Bootswatch のテーマに Journal を使用します。読み込み順に注意してください。

app/javascript/packs/application.scss

@import '~bootswatch/dist/journal/variables';
@import '~bootstrap/scss/bootstrap';
@import '~bootswatch/dist/journal/bootswatch';

Bootstrap の JavaScript が動作するように Webpack の設定を更新します。

config/webpack/environment.js

const { environment } = require('@rails/webpacker')
const vue =  require('./loaders/vue')
+const webpack = require('webpack')

environment.loaders.append('vue', vue)
+environment.plugins.set('Provide', new webpack.ProvidePlugin({
+  $: 'jquery',
+  jQuery: 'jquery',
+  Popper: ['popper.js', 'default']
+}))
+

app/views/layouts/application.html.erb で app/javascript/packs/application.js と app/javascript/packs/application.scss を読み込みます。

app/views/layouts/application.html.erb

<%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
+    <%= javascript_pack_tag 'application' %>
+    <%= stylesheet_pack_tag 'application' %>
</head>

<body>

Vue.js の動作を確認するために、試しにコントローラを作成します。

$ bin/rails g controller Page home

生成された app/views/page/home.html.erb で app/javascript/packs/hello_vue.js を読み込みます。最初 javascript_pack_tag だけで Vue ファイル内の CSS も効くものだと思っていましたが、実際は stylesheet_pack_tag も必要でした。

app/views/page/home.html.erb

-<h1>Page#home</h1>
-<p>Find me in app/views/page/home.html.erb</p>
+<%= javascript_pack_tag 'hello_vue' %>
+<%= stylesheet_pack_tag 'hello_vue' %>

Rails サーバを起動し http://localhost:3000/ にアクセスします。

$ bin/rails s

app/javascript/app.vue が動いているようです

ただし、これでは Bootswatch が正しく導入されているか分かりません。そこで app/javascript/app.vue を次のように書き換えます。

app/javascript/app.vue

<template>
  <div id="app">
    <nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-primary">
      <a class="navbar-brand" href="#">Hidamarisou</a>
    </nav>
    <main role="main" class="container">
      <div class="jumbotron">
        <h1>ひだまり荘</h1>
        <p class="lead">{{ message }}</p>
        <button class="btn btn-outline-primary" type="submit">入る</button>
      </div>
    </main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '✘╹◡╹✘ ようこそひだまり荘へ ✨'
    };
  }
};
</script>

<style scoped>
#app {
  padding-top: 5.0rem;
}
</style>

これで Bootswatch のテーマが正しく効いていることも確認できました

Webpacker で Bootswatch (Bootstrap v4) + Vue.js の Rails プロジェクトを作成する

この記事は

手順

参考