🐯
Nuxt3＋Bootstrap5 導入手順
今回はNuxt3にBootstrap5を入れて使ってみようと思います！
Vue3にBootstrap5を入れる記事は多かったのですが、
Nuxt3に入れる記事があまりなかったので、今回まとめてみました。
思ったより手順少ないですよー。
1. Bootstrap5をインストールする
Bootstrap5は2021年5月に正式リリースされました。
4と5の違いについては詳しくないですが、脱JQueryをしたのが目玉だそうです。
おかげで軽量化されたり、Vue.jsなどのフレームワークでも使いやすくなったとのこと。
yarn add bootstrap
2. nuxt設定を変更する
nuxt.config.ts
import { defineNuxtConfig } from "nuxt";
// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
css: ["bootstrap/dist/css/bootstrap.min.css"],//追加
vite: {
define: {
"process.env.DEBUG": false,
},
},
});
3. 変更を確認
app.vueにボタンを設置してデザインが適用されているか確認します。
app.vue
<template>
<div class="m-5">
<!-- <NuxtPage /> -->
<div class="btn btn-success">Success</div>
<div class="btn btn-danger">Danger</div>
<div class="btn btn-warning">Warning</div>
</div>
</template>
無事適応されています！
まとめ
今回はNuxt3にBootstrap5を追加する手順をご紹介しました。
Vuetify3の正式リリースまでは色んなUIコンポーネントを使ってみたいと思います。
Bootstrap5のテーマ指定などの設定方法については、今後使いながら追記していけたらと思います。
お役に立てたら幸いです。
参考
助かりました！
Discussion