のはどうやるんだろう？と思った時の個人的メモです。
今更ながらVueUseとかいう超凄い！超便利！なライブラリを知ったので、手始めにテーマ切り替えを試してみます。Nuxt 3のオートインポートにも対応しているんですって！これはもう使わない手はない！ってことで、行ってみましょう。
↓はデモとVueUseのドキュメントです。
開発環境
- node.js : v16.17.0
- yarn : 1.22.19
プロジェクト作成
先ずはNuxtのプロジェクトを作成します。いつもの。
npx nuxi init nuxt3-app
cd nuxt3-app
yarn install
ライブラリ等々インストール
今回のメインであるVueUse、CSSフレームワークのTailwind CSSと豊富なテーマやコンポーネントが魅力的なdaisyUIをインストールします。
yarn add --dev @vueuse/nuxt @vueuse/core @nuxtjs/tailwindcss daisyui
tailwind.config.tsを作成し、追記。
npx tailwindcss init
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [],
theme: {
extend: {},
},
+ plugins: [require('daisyui')],
};
nuxt.config.tsに追記。
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
+ modules: ['@nuxtjs/tailwindcss','@vueuse/nuxt'],
});
Nuxtのプロジェクトを編集
OSのテーマを取得し、それを管理するのにuseColorModeを使用します。この関数はuseStorage等をラップしているので、自動的に永続化までできちゃいます。楽ちんですね！
属性名には今回daisyUIのテーマを使用するのでdata-themeを指定しておきす。
const useTheme = () => {
const mode = useColorMode({
storageKey: 'theme',
attribute: 'data-theme',
emitAuto: true,
});
const { next: changeTheme } = useCycleList(['dark', 'light', 'auto'], {
initialValue: mode,
});
return {
theme: readonly(mode),
changeTheme,
};
};
export default useTheme;
<script setup lang="ts">
const { theme, changeTheme } = useTheme();
</script>
<template>
<Html :data-theme="theme" />
<button class="btn" @click="changeTheme()">change</button>
</template>
以上です。たったこれだけでOSのテーマを取得したり、永続化したりと大変お手軽です！型もしっかり付いていますし、オートインポートもいい感じ！
まだまだたくさんの便利な関数が用意されているので、色々試してみましょう！
GitHub Pagesにデプロイ
備忘録
リポジトリのSettings → Pages → Build and deployment → SourceをGitHub Actionsに設定。
+ const REPOSITORY_NAME = '/<repository-name>/';
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
modules: ['@nuxtjs/tailwindcss', '@vueuse/nuxt'],
+ app: {
+ baseURL: REPOSITORY_NAME,
+ cdnURL: `https://<user-name>.github.io${REPOSITORY_NAME}`,
+ },
});
name: Deploy to GitHub Pages
on:
push:
branches: ['master']
workflow_dispatch:
permissions:
contents: read
pages: write
id-token: write
concurrency:
group: 'pages'
cancel-in-progress: true
jobs:
build:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v3
- name: Setup Node
uses: actions/setup-node@v3
with:
node-version: '16'
- name: Setup Pages
id: pages
uses: actions/configure-pages@v1
- name: Install dependencies
run: yarn
- name: Generate static page
run: NUXT_APP_CDN_URL=https://<user-name>.github.io/<repository-name>/ yarn generate
- name: Upload artifact
uses: actions/upload-pages-artifact@v1
with:
path: ./.output/public
deploy:
permissions:
pages: write
id-token: write
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
runs-on: ubuntu-latest
needs: build
steps:
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v1
さいごに
以下の記事を参考にさせていただきました。感謝！
VueUse
Nuxt3 + GitHub Pages で ﾎｰﾑﾍﾟｰｼﾞ兼 ﾌﾞﾛｸﾞを作成してみた
Nuxt3・MicroCMS・Github Pagesを利用してJamStackなWebアプリケーションを作成する