例えばメニューを実装する際に、メニュー外をクリックしたら閉じるようにしたいときが割とあるため備忘録として。 Nodeのcontainsを使い、クリックされた要素がメニュー要素の子孫に含まれるかどうかを判定しています。 vueでwindowやdocumentにイベントリスナーを追加するとコンポーネントがunmountされてもイベントリスナーが残り続けるため、必ずunmount時にremoveしましょう。 <script setup lang="ts" /> import { ref, onMounted, onBeforeUnmount } from 'vue' const element = ref<HTMLDivElement | null>(null) // 対象の要素 const clickOutside = (e: MouseEvent) => { // [対象の要素]が[クリックされた要素]を含まない場合 if (e.target instanceof Node && !element.value?.contains(e.target)) { //　何らかの処理 } } // windowにセットしたイベントはremoveするのを忘れずに onMounted(() => { addEventListener('click', clickOutside) }) onBeforeUnmount(() => { removeEventListener('click', clickOutside) }) </script> <template> // 対象の要素（メニューとか） <div ref="element" > ... </div> </template>

結論 とりあえずyarn upgradeを行う。 これをすれば大抵のモジュールエラーは解決すると思います。 自分も某colors.jsでエラーが出ていたところをアップデートしたら直りました。 それでも直らない場合 一旦モジュールを入れる前まで戻してみるのも人流の手であると言えます。 gitのヒストリーを遡って確認してみるといいかもしれません。

Nuxt3の環境構築 Nuxt3の環境構築行っていきます。 ドキュメント npx nuxi init project_name cd project_name yarn install yarn dev これでlocalhostで立ち上がるはずです。 nodeのver.を気をつけないと立ち上がらないので注意しましょう。 Pugの導入 yarn add -D pug pug-plain-loader SCSSの導入 yarn add sass Vuetify3の導入(2022/1/16時点) Vuetify3はアルファ版なので、気をつけましょう。 vuetify@3.0.0-alpha.12が最新ですが、なぜかうまく動かなかった。。。 yarn add vuetify@3.0.0-alpha.11 /plugins/plugin.jsを作ります。 plugin.js import { defineNuxtPlugin } from '#app' import { createVuetify } from 'vuetify' import * as components from "vuetify/components"; import * as directives from "vuetify/directives"; export default defineNuxtPlugin((nuxtApp) => { const vuetify = createVuetify({components, directives}) nuxtApp.vueApp.use(vuetify) }) nuxt.config.tsを編集します。 nuxt.config.ts import { defineNuxtConfig } from 'nuxt3' export default defineNuxtConfig({ css: ['vuetify/lib/styles/main.sass'], build: { transpile: ['vuetify'] } }) 参考： Nuxt 3 を Google App Engine 本番環境 で SSR + キャッシュ運用してみる 【Vue.js】Nuxt3でVuetify3を使えるようにする

Nuxt3の環境構築 Nuxt3の環境構築行っていきます。 Vuetify アルファやQuasarなどはエラーが多くて断念。 仕方がないのでNuxt3に対応しているCSSフレームワークであるwindicssを採用。 とても早くて使いやすそう。 (Vuetifyに頼ってきて、ろくにCSS書いたことない。。。勉強せねば。。。) 対応ライブラリ一覧 Nuxtアプリの作成 Nuxt3 installation npx nuxi init プロジェクト名 cd プロジェクト yarn install yarn dev これでlocalhostで立ち上がるはずです。 nodeのver.を気をつけないと立ち上がらないので注意しましょう。 nuxt-windicssの導入 windicss yarn add nuxt-windicss -D # npm i nuxt-windicss -D nuxt.config.tsを編集 nuxt.config.ts import { defineNuxtConfig } from 'nuxt3' export default defineNuxtConfig({ buildModules: [ 'nuxt-windicss', ] }) App.vueを削除 App.vueを削除します。 pages/index.vueを編集 pages/index.vue <template> <div class="bg-green-200 h-100vh p-6"> <section class=" relative flex flex-col items-center justify-between space-y-4 shadow rounded-lg p-4 bg-gray-100 " > <p class="text-left"> Hello Qiita! </p> </section> </div> </template> Amplifyの導入 Amplify Doc@Vue aws-amplifyを追加 yarn add aws-amplify プラグインを追加 amplify.ts 設定をしていく $ amplify init Enter a name for the project プロジェクト Project information | Name: プロジェクト名 | Environment: dev | Default editor: Visual Studio Code | App type: javascript | Javascript framework: none | Source Directory Path: src | Distribution Directory Path: dist | Build Command: npm run-script build | Start Command: npm run-script start ? Initialize the project with the above configuration? No ? Enter a name for the environment dev ? Choose your default editor: Visual Studio Code ? Choose the type of app that you're building javascript Please tell us about your project ? What javascript framework are you using vue ? Source Directory Path: / ? Distribution Directory Path: .output/public ? Build Command: yarn build ? Start Command: yarn start Using default provider awscloudformation ? Select the authentication method you want to use: AWS profile Amplify Hostingを用いたデプロイ $ amplify add hosting Select the plugin module to execute Hosting with Amplify Console (Managed hosting with custom domain s, Continuous deployment) ? Choose a type Continuous deployment (Git-based deployments) ? Continuous deployment is configured in the Amplify Console. Please hit enter once you connect your repository. ... Amplify hosting urls: ┌──────────────┬──────────────────────────────────────────────┐ │ FrontEnd Env │ Domain │ ├──────────────┼──────────────────────────────────────────────┤ │ master │ https://---------------.amplifyapp.com │ └──────────────┴──────────────────────────────────────────────┘

Nuxt3の環境構築 Nuxt3の環境構築行っていきます。 Vuetify アルファやQuasarなどはエラーが多くて断念。 仕方がないのでNuxt3に対応しているCSSフレームワークであるwindicssを採用。 とても早くて使いやすそう。 (Vuetifyに頼ってきて、ろくにCSS書いたことない。。。勉強せねば。。。) 対応ライブラリ一覧 Nuxtアプリの作成 Nuxt3 installation npx nuxi init プロジェクト名 cd プロジェクト yarn install yarn dev これでlocalhostで立ち上がるはずです。 nodeのver.を気をつけないと立ち上がらないので注意しましょう。 nuxt-windicssの導入 windicss yarn add nuxt-windicss -D # npm i nuxt-windicss -D nuxt.config.tsを編集 nuxt.config.ts import { defineNuxtConfig } from 'nuxt3' export default defineNuxtConfig({ buildModules: [ 'nuxt-windicss', ] }) App.vueを削除 App.vueを削除します。 pages/index.vueを編集 pages/index.vue <template> <div class="bg-green-200 h-100vh p-6"> <section class=" relative flex flex-col items-center justify-between space-y-4 shadow rounded-lg p-4 bg-gray-100 " > <p class="text-left"> Hello Qiita! </p> </section> </div> </template>