Nuxt3

概要 Nuxt 3.2.3 から 3.20.2 へのメジャーアップデートを含む、依存パッケージの大規模更新を実施しました。 主要なパッケージ更新 パッケージ 更新前 更新後 nuxt 3.2.3 3.20.2 @nuxt/content 2.5.2 3.11.0 @nuxtjs/i18n 8.0.0-beta.10 10.2.1 vuetify 3.1.8 3.7.6 sass 1.58.3 1.83.4 @mdi/js 7.1.96 7.4.47 新規追加パッケージ better-sqlite3: ^12.5.0 - @nuxt/content v3 の依存 vue-i18n: ^11.0.0 - i18n モジュールの依存 対応が必要だった変更点 1. @nuxt/content v3 への移行 content.config.ts の新規作成が必要になりました。 i e } m x ) p p c } c o o o o r r l c } n t t l o ) t e n t s e { d c t y o n e t e p u t d f i n e r . e a o t : c c f u n : e o i l s ' : n n t : d p f e e a i C d { f g g o e i e . n f n ' t t i e , s e n C . n e o m t C l d C o l ' o n e n t c f e t i n i g t o , C n o ( d n { e f f i i g n ( e { C o l l e c t i o n } f r o m ' @ n u x t / c o n t e n t ' 2. @nuxtjs/i18n v10 への移行 nuxt.config.ts の変更点 i } i } 1 1 8 l ] l v } 8 l ] b } l v B n o , a u , A n o , u , a u e : c { { n e f f : c { { n o r n e f a g I a t a d p u g I o { l c c D 1 l e { l c c l t n D 1 r e o o i 8 l r e o o e i t i 8 e s d d r n b s d d : m i r n : e e : : a : e e i m : : : : c : : { z e [ " { k [ e O " " " " l L " " T n l . j e o o j e r l o / a n c c a n a y c i " " a a " " n : a 1 , , l l , , s l 8 e e l t e n i i s : l l a r s . s s / a a t u " c o o " l n n i e , o : : , a g g o , n n u u n f " " g a a D i j e , g g i g a n e e r . _ - : : e 末 t J U c 尾 s P S " " t ス " " " j e i ラ , , , a n v ッ - - e シ f f J U : ュ i i P S 削 l l " " f 除 e e , , a 外 : : l 部 f f s フ " " i i e ァ j e l l , イ a n e e ル . . : : 化 j j s s " " " " j e a n } } . . , , j j s s " " } } , , i s o → l a n g u a g e i18n.config.ts の新規作成 e } x ) p l f ) o e a ; r g l t a l c b d y a e : c f k a f L u a o l l c t s a e l d , e e : f i " n j e a I " 1 , 8 n C o n f i g ( ( ) = > ( { localesフォルダの移動 locales/ → i18n/locales/ ...

概要 （ChatGPTによる作成） Nuxt i18nモジュールでは、ユーザーのブラウザ言語を検出して、適切な言語のページにリダイレクトする機能があります。しかし、特定の状況ではこの機能を無効化したい場合もあります。この記事では、detectBrowserLanguage: falseを使用してブラウザ言語検出を完全に無効化する方法について解説します。 https://v8.i18n.nuxtjs.org/guide/browser-language-detection 設定方法 ブラウザの言語検出機能を無効にするには、nuxt.config.jsファイルでdetectBrowserLanguageオプションをfalseに設定します。 e } x ) p i } 1 , r 8 d t そ n e そ の : t の d 他 言 e 他 e の { 語 c の f 設 検 t 設 a 定 出 B 定 u を r l 無 o t 効 w 化 s d e e r f L i a n n e g N u u a x g t e C : o n f f a i l g s ( e { これが役立つケース 特定のURLで直接アクセスさせたい場合 : 特定のコンテンツをユーザーが直接訪れることを意図している場合、リダイレクトが邪魔になることがあります。 クロールの最適化 : 検索エンジンのクローラーが特定の言語ページに直接アクセスできるようにしたい場合。 一貫性のあるユーザーエクスペリエンス : 例えば、リンクされた言語のページ同士を行き来するユーザーに対して、予想外のリダイレクトを避けたい場合。 まとめ detectBrowserLanguage: falseを利用することで、ユーザー体験やSEO最適化のために、リダイレクトに頼らずにサイトのアクセスを制御できます。適切な状況でこの設定を利用することで、サイトのユーザビリティを向上させることができます。 ...

概要 Nuxt Contentにおいて、「Cannot find name ‘queryContent’.」というエラーが発生しましたので、対処方法に関する備忘録です。 原因 2025/1/16にNuxt Content v3がリリースされたようです。 https://content.nuxt.com/blog/v3 これにより、queryContentはqueryCollectionなどに変更されたようです。 対処方法 以下に記載があるように、content.config.tsを作成した上で、queryCollectionなどを使用するように変更する必要があるようです。 https://content.nuxt.com/blog/v3#️-content-collections 上記の対応により、エラーを解消できました。 まとめ Nuxt Content v2からv3への移行にあたり、参考になりましたら幸いです。

概要 @sidebase/nuxt-authのローカル認証を試す機会がありましたので、備忘録です。 背景 以下の記事で、@sidebase/nuxt-authを使って、Drupalの認証を行う方法を紹介しました。 上記の記事では、Nuxt3のSSRを利用して、@sidebase/nuxt-authのauthjsプロバイダを使用していました。プロバイダの説明は以下です。 authjs: for non-static apps that want to use Auth.js / NextAuth.js to offer the reliability & convenience of a 23k star library to the Nuxt 3 ecosystem with a native developer experience (DX) local: for static pages that rely on an external backend with a credential flow for authentication. The Local Provider also supports refresh tokens since v0.9.0. Read more here. （機械翻訳）authjs: 非静的なアプリ向けで、Auth.js / NextAuth.js を使用し、23,000以上のスターを持つ信頼性と利便性をNuxt 3エコシステムに提供します。開発者にネイティブな開発体験 (DX) を提供します。 local: 外部バックエンドを使用し、認証のために資格情報フローを利用する静的ページ向けです。このローカルプロバイダーは、バージョン0.9.0以降、リフレッシュトークンもサポートしています。詳しくはこちらをご覧ください。 ...

概要 Nuxt3と@sidebase/nuxt-authを使って、Drupalの認証を行う方法です。 背景 以下の記事で、GakuNin RDMの認証を行う方法を紹介しました。 また、以下の記事で、Next.jsからDrupalのOAuthを利用する方法を紹介しました。 これらを参考にして、Nuxt3からDrupalのOAuthを利用します。 方法 ソースコードは以下のリポジトリでご確認いただけます。 https://github.com/nakamura196/nuxt-rdm 具体的には、以下です。 https://github.com/nakamura196/nuxt-rdm/blob/main/server/api/auth/[…].ts { } , i n t c c a } t } p } d a y l l u , o , r , : m p i i t u p } k a } o r } e e e e h r a , e s , f e ; " : : n n o l r s r r } n y c } c } c i } r i t i n e i d t t r : a c e e / : n o ) o ) o f e l u d a m m r " " I S i m o s d u a c n c c c g r } ; n m h } b ; n t t e r : m a a u D o d e z p s p p i s p { s l l o r e / s e e , o s ( h u ( n e i g p r a : c a r : e o r e i r t i i d a d u a t t a " d t ! r r p p : l e a u u r t o : n e R / e e e e n i s p h d C y r o n r { r : : l p t u e i c { s c u a q b n n : t r e i r o e o , j e w o o p " a h s t o e p e t n u u o t t _ e R / e d r n s s { f f r p p , l " e : n s r _ _ t t e d _ _ c t c u a s : s t o . n i i o r r " , R : s o t u i h s y i s o y t n u : e n o e t l l f o o , u u . c y r m / t d e n p _ t t = " n k w o e e i f f n s { e e p i e c ( = : c t e u i h P { t = ) k ) . l i i t e n s e : C a c r e : r m / a O - E e s e l l i R v s : o l o n u e x i e c w S T a { r n { u . e e m u . . ` n l n e s t t " : C a a T y w r s b n . . e n D e " $ f b t w e : . a o l i " p a o : , a e p C t R n c { i a e R p u ` n l t , e i r m m r o i U v o g c x U u u a t $ f b " t ( j e a o n m P . d ( k t R n s r h { i a f : ` s i f f e A D e ) ) L t e a o g c e r T o l i i C L R " . d S i R m r ( k t " e o n " l g o _ U , n r { e m u s i ) c a s k s e ( n A P e u a e n . z . d h p . e } u p ) f U A x p r C t c a n r ( p j n ; b r . i T L t a c o i o t e u p l s " o " d g H _ A l h n m d i x p r i o r f N r ( _ S u ` P f e e o t a o c n e を i o n u ) U C t , a i C n A l c a ( q ユ l u p . R O h r g _ u ` e t ) u ー e E l a d L P U a ( n c t , s i ; e ザ . m l l r , E r m ) f o h s o s ー p a , C u , l s . i " d U . n t の r i l p ( d g " e r e / 一 e l i a { r ( , " l n x f 意 f e l u ) , v - P a の e P n C p . . w a i I r r プ t l a d D w r l D r o ロ I i l r R w s e と e v フ d e C u U - e d し d i ァ , n l p P f : て _ d イ t i a A o t 利 u e ル S e l L r h $ 用 s d U e n C _ m e { e " R c t l T - r r , L r I i O u r e n を e d e K r e s a 画 t , n E l s . m 像 , t N e p s e と S _ n o t メ し e U c n a ー て c R o s t ル 使 r L d e u が 用 e e s " な （ t d b T U い 必 , " o e n 場 要 , d x k 合 に " y t n の 応 " } o フ じ , o ` w ォ て n ) n ー 調 { c ; ル 整 e U バ ） s ッ e ク r " , 名 前 の 優 先 順 位 を 設 定 まとめ 間違っている点もあるかもしれませんが、参考になりましたら幸いです。 ...

概要 Nuxtで@elastic/search-uiを使ったサンプルリポジトリを作成しました。 https://github.com/nakamura196/nuxt-search-ui-demo 以下からお試しいただけます。 https://nakamura196.github.io/nuxt-search-ui-demo 背景 @elastic/search-uiは以下のように説明されています。 https://www.elastic.co/docs/current/search-ui/overview A JavaScript library for the fast development of modern, engaging search experiences with Elastic. Get up and running quickly without re-inventing the wheel. （機械翻訳）Elasticを使用して、モダンで魅力的な検索エクスペリエンスを迅速に開発するためのJavaScriptライブラリです。車輪を再発明することなく、すぐに使い始めることができます。 以下でVue.jsを使ったサンプルリポジトリが公開されています。 https://github.com/elastic/vue-search-ui-demo 今回は上記のリポジトリを参考に、Nuxtを使ったサンプルリポジトリを作成しました。 メモ 初期検索 以下のように指定することで、初期読み込み時の検索を実行することができました。 https://github.com/nakamura196/nuxt-search-ui-demo/blob/main/searchConfig.ts#L49 a l w a y s S e a r c h O n I n i t i a l L o a d : t r u e , 公式ドキュメントの以下に記載がありました。 ...

概要 nuxt3-leafletで、指定したマーカーを前面に表示する方法に関する備忘録です。 方法 以下のように、LMarkerにz-index-offset属性を用いることで、指定したマーカーを前面に表示することができました。 < t e m / p < t l L / e a M @ : : < < L m t a c l z L / L M p e r l a - T { L I : : : : : s : : / a l k i t i o { T c i i i p t h s s L r a e c - n o o o c c c o o a h h I k t - r k l d l m o n o o o p o d a a c e e f = n e t a l n n n u l o d d o r > o " g x i r t U S A p t w o o n > r s = - p k i r i n A i U w w > = e " o > e p l z c n p r S A " l [ f r > = e h c A l i n m e m f . " = o h n = z c a c a s t m " r o c " e h r t r e i a [ = r h h = o k M k t t r 2 " = o t " r e a e = l k 5 [ " r t [ = r r r " e e , 1 [ = p 4 " k . s r 2 1 " s 1 [ i e l e } . 4 , , [ : , 1 n r a l } i 1 1 / 2 ( t e c ] 4 - 6 / 4 , m m , c o " 1 3 , e 1 a a t n ] 4 s ] 4 r r m e " " ] - m " 1 k k a d " 2 . ] e e r S 8 s " r r k p ] h s ) e o " / " " r t l > . I e l d a n f g = l ] = e " = t @ m 1 a . r 9 k . e 2 r / . d i i d s t ? / i 1 m 0 a 0 g 0 e s : / m 0 a " r k e r - s h a d o w . p n g " まとめ nuxt3-leafletの利用にあたり、参考になりましたら幸いです。 ...

概要 Nuxt3でサイトマップを作成する方法がいくつかありましたので、備忘録です。 [1] @nuxtjs/sitemap ドキュメント https://sitemap.nuxtjs.org/ 参考記事 https://zenn.dev/kumao/articles/3fe10078a7e9d2 インストール n p m i n s t a l l - D @ n u x t j s / s i t e m a p リポジトリ https://github.com/nuxt-community/sitemap-module [2] sitemap 参考記事 https://zenn.dev/kakkokari_gtyih/articles/db1aed4fed6054 インストール n p m i n s t a l l - D s i t e m a p リポジトリ https://github.com/ekalinin/sitemap.js ...

概要 Nuxt3とVuetifyとCesiumを使用したサンプルリポジトリを作成しました。 ソースコード vue-cesiumを使用しています。 https://github.com/zouyaoji/vue-cesium GitHubリポジトリは以下です。 https://github.com/nakamura196/nuxt3-vuetify-cesium デモサイト https://nakamura196.github.io/nuxt3-vuetify-cesium/ まとめ 参考になりましたら幸いです。

概要 Nuxt 3とDecap CMSを試してみましたので、その備忘録です。 https://decapcms.org/ Nuxt3プロジェクトの用意 既存のサイトにDecap CMSを追加する以下を参考にしました。 https://decapcms.org/docs/add-to-your-site/ まず、nuxt/contentモジュールを含む、Nuxt3のプロジェクトを用意します。 ソースコードの例はこちらです。 https://github.com/nakamura196/nuxt3-decapcms 以下の2つのファイルを作成しました。 # l # p b m p c o u a e u o w c T b c n b d b l - h a h l k a r i l l e l i i e m a a i e n l f f c s f n _ s s n e n _ c c a a o o r l i b h d : c f _ t m b l r e u e - - - - u a l _ : h o f i e e d m a g l s c i m g : l o o : l e a t : d { { { { i k n o i d l n : r t e s n e e d t m e d s ' : : : ' : l l l l g n e - a r e : b ' { a a a a d s : g i : r l B ' ' t { b b b b t : h a n : o l c f r y e e e e h o e t p g o o r u e l l l l e t u d e # u / ' g n o e a : : : : r l i w b i ' t n r d u d t a B l m e t } ' ' ' ' e e o y r i g n m } T P D B f * r a c t a - i u e o a n i n / / t { t b s d u o a c i b t { l l c y l t l h m l e m e i r ' t * _ g o r o ' s i , w t g ' n , h p p b o o ' t t n r e r h n D i a o k u } a a o m x i f p } m t n e y n l d - e e ' : d o a { : ' , s e w t { , ' e n e d ' n b r t a t n a o v e y i a m d e d o } t m e y r p } l e : ' t - e : , p i { ' ' o o { , ' d w r n s d e i t a l w a s d l u i t c g ; g d e r e } g ' i t d } e , p : e ' t t f : w i ' a i o m u ' d n a l s g ' r t t e , k s r t d i : w o t n i w o g ' d n ' d g ' m a e a } t t } s e : t t e i ' r m s ) e t ' r i } n g ' } < < ! h / D t < < h O m h / b / t C l e < < < < < h o < < b m T > a m m t ! s e d ! s o l Y d e e i - c a y - c d > P > t t t - r d > - r y E a a l i > i > e I p I p h c n > n t n t t h a C c c m a m o l s l s l r e n u r u r > s = t d c d c e " e e = e = t v n " " = i t t h t h " e h t h t u w M e t e t t p a p p f o n s s s s - r a c : c : 8 t g r / r / " " e i / i / r p i p u c < t d t n o / e p n t t n t k t i h t h g e t a i a . n l t t t c t e y o = > e . b m " n n u / w a e i d i b t l e d l l d c t e i s a h s f p = y t - d N . h c e e c e m v t o s i l m p @ c i / a ^ e f v g 3 - y 1 e . w / 0 i I n a . d d e n 0 t e t d / h n l d , t i p i i f o s i t y w t n y - e / i i r d t o d s e i n e c a n D a l t t e p - h i c - s i t a c c s y p m a - s l p w C . e a i M j = g d S s 1 e g " . . e > 0 t < " . / j s s c " r > i < p / t s > c r i p t > そして、GitHubにpushしました。 ...

概要 以下の記事で、Nuxt 3でLeaflet Marker Clusterを試す方法を紹介しました。今回は、Composition APIを使った書き方に更新したので、その備忘録です。 インストール 以下をインストールします。 n n p p m m i i l - e D a f @ l t e y t p e l s e / a l f e l a e f t l . e m t a r @ k t e y r p c e l s u / s l t e e a r f l @ e v t u . e m - a l r e k a e f r l c e l t u / s v t u e e r - l e a f l e t ソースコード 以下を参考にしてください。 ...

概要 Nuxt3とVuetifyを使用したサンプルリポジトリに、Cytoscapeの動作デモを追加しました。 https://github.com/nakamura196/nuxt3-demo 以下のページで動作確認いただけます。 https://nakamura196.github.io/nuxt3-demo/ インストール 以下を実行しました。 n n p p m m i i c @ y t t y o p s e c s a / p c e y t o s c a p e ソースコード < t e < i l c c } o } < # } m / s m e o o ; n ) / s c / p < t c p t n n c ] M c } ; s t y w h p b s l d / e r o s s y ) o y ) c y i e o a t a i < d m i r c t t . { } { } ; u c b a s e } l } ; r l { d i s c y t v d i p p t y a , , n = o o u t l , a , i e t g i k l e - i v l t : c a d g d p g d t n x t y . . . } . . } e n ] e ] y n d p p h h t g e > i b v > a c o d d r a o r a e c t S o l s s c ) s c ) m o , d , o a i a t s : t i r > d t t s y a u d ( o t s o t d y a e u e t e s h w " " " " c " e s w " " " " , e d { { { { { { { { g { { { { { { { u m r d > c : o o = n i e e t n n N [ u a i u a ( t i l n : y l s e i b b b b o t l s i t l t c n e e t e e d o 1 n u " d > t o y t o p : t p : ( o n e s l e ( i d a o o o n e e ( d a i a u t s d d d d d d d d s d d d d d d d : : c i p 0 8 : n v c = u s : d : i : ) s e c e c e c { g t c r r r t x c { t r n r r s : a a a a a a a a : a a a a a a a t n e 0 0 d i l " p c = e { o { c r t l y s t h h k d d d e t t h g e g v : t t t t t t t t t t t t t t t { " e g d % % a - e a c a n " n " = a : i e t h o t : g e e e n - o : e - e e [ a a a a a a a a [ a a a a a a a b d : > ; ; b c w s y l p n u = n i : e i > p o c o e r : r r r r t v r t c t - { : : : : : : : : : : : : : : : r : s o " s " a e u m o d d d e d n t s e ( 8 o - - - : a ( 6 - o - s e 1 o l > = > n l b d : { g : { ( o E i c t " 8 0 u c w o l " , a l a t { { { { { { { { { { { { { { { a t 0 l o " < g f l e e e { c n f a ( n 0 , n o i p " i e r o r y d r , u r m / = r ; r s " x s " u a y p ) o , d l d a d g d r r r l i i i i i i i i s s s s s s s t u t : a d " o = " n : " e m b : e d - o t c a n g o " o e d d d d d d d d o o o o o o o h e e - i t m = > , o , d e l e f r h i t " e w : w " : : : : : : : : u u u u u u u f , ; l 4 v s d 3 g n e t " i " " t a : " - - : r r r r r r r i i " > " " 0 { e 0 e t d r ) t : : y ( ) s " c " " " " " " " " c c c c c c c r g > c = ; " 0 " . : u " " n " h # o " c b l a r g p w e e e e e e e s h c y , g e : " 3 : a c a f l b a i a p o r l h : : : : : : : t t o t r + + e f , # , m e p f o e t r d h s a a e " c l o e y t a " 0 0 e n e a r z " d y i e s n a " " " " " " " , y o s f c : c E l c 0 . ) t " a " i " b d " s t t c b b g g l a a r c ( = o o l s o 0 5 " e : a : e } u " h " " a i i r r a p n = a n u 2 u e e v " , , r a r } g } o t r r a a d h ; " p u r n 0 n m , e , " " " " " } " } p } } " d d s s y i p e l e t 0 t e r , t , # , , } } p , " " s s b d r " l f , n " r f , } } , e } } , , h h u " i ; ) ( } } t , i f , r , , t o o g , m ; 0 , , s B a a } " a t t p p " a ) o y n a , r a a p p , t r ; u I g a } g r r e e a y / r d l a e g g r r t r " r c ( e " } t e e " " a g e / e " " , , : t t , , r e a r : c , : : g t c e y " t t e : o t a " " b " " a a t n i c n ) i l g r r : " : v t o , r a r g g r c e i d d d a e e " o l ( v e " y s t t a s i { e " b s : : p e c } ( } u h h " k ) 0 + g o " " i = ; ) } " p p w d } " ; c , p l h " a o } e a e } d / u r n a } , d : n } " t t N t , " " } o a , } , d n } } e y t } " a , } } > r , , p g u e s t h : < / " v c - a b t t " n > } , まとめ 参考になりましたら幸いです。 ...

Nuxt3でnpx nuxi typecheckを実行したところ、以下のエラーがでました。 n u x O t b . j c e o c n t f i l g i . t t e s r : a 1 l 6 : m 3 a y - o e n r l r y o r s p T e S c 2 i 3 f 4 y 5 : k n A o r w g n u m p e r n o t p e o r f t i t e y s p , e a ' n { d a ' p " p a : p p { " ' b a d s o e e U s R L n : o t s t e r x i i n s g t ; i } n ; t r y u p n e t i ' m I e n C p o u n t f C i o g n : f i { g < p N u u b x l t i C c o : n f { i g t , o k C e o n n : f i s g t L r a i y n e g r ; M e } t ; a > } ' ; . t y p e s c r i p t : { s t r i c t : b o o l e a n ; } ; } ' i s n o t a s s i g n a b l e t o p a r a m e t e r o f t y p e ' I n p u t C o n f i g < N u x t C o n f i g , C o n f i g L a y e r M e t a > ' . この解決策として、以下に記載がある通り、2つもライブラリをインストールする必要がありました。 ...

Nuxt3でURLクエリの変更をwatchで監視しようと思い、以下のように書いてみましたが、URLクエリが変更されても、watchは機能しませんでした。 < c w s o a / c n t r } s r s c o c i t h u c r p ( t = o i t r e > n p o , s t l u { o > a t l n e e g . = = l " o t u g s s ( " e r R o s o u e u t t t e u e [ p ( ' > ) q u e r y ' ] ) そこで、以下の記事を参考にさせていただきました。 ...

概要 CETEIceanとNuxt3を使ったサンプルリポジトリを作成しました。 https://github.com/TEIC/CETEIcean 以下のissueを参考にさせていただきました。 https://github.com/TEIC/CETEIcean/issues/27 以下で紹介されているスクリプトでは、CETEIceanのv1.8.0では動作しなかったため、CETEIceanのv1.8.0とNuxt3で動作する最小限のリポジトリを作成しました。 デモページ https://nakamura196.github.io/ceteicean-nuxt3 ソースコード https://github.com/nakamura196/ceteicean-nuxt3 主なファイル https://github.com/nakamura196/ceteicean-nuxt3/blob/main/app.vue まとめ 参考になりましたら幸いです。またCETEIceanを開発してくださっている方々に感謝いたします。

概要 Nuxt3でOpenSeadragonとOpenSeadragon SVG Overlayを使う例を作成しました。（鯰に御札を貼る要石）「国立国会図書館 所蔵」の画像を利用しています。 OpenSeadragon https://nuxt3-demo-nine.vercel.app/osd OpenSeadragon SVG Overlay https://nuxt3-demo-nine.vercel.app/osd-svg 方法 ポイントとして、以下のようなプラグインファイルを用意しました。これにより、SSR時に生じる不具合を解消できました。 https://github.com/nakamura196/nuxt3-demo/blob/main/plugins/osd.client.js またsvg overlayに関する記述は以下を参考にしました。 https://github.com/openseadragon/svg-overlay/blob/master/openseadragon-svg-overlay.js まとめ よりよい記述の方法があるかと思いますが、Nuxt3でのOpenSeadragonの利用にあたり、参考になりましたら幸いです。

概要 Nuxt3（Vue3）を用いたテキストの選択機能の実装にあたり、VueUseを使用してみましたので、その備忘録です。 https://vueuse.org/ デモ 以下のページからお試しいただけます。 https://nuxt3-demo-git-main-nakamura196.vercel.app/textSelection ソースコードは以下です。 https://github.com/nakamura196/nuxt3-demo/blob/main/pages/textSelection.vue インストール方法 以下のページに記載があります。 https://vueuse.org/guide/ 具体的な手順は、以下のとおりです。 n p m i - D @ v u e u s e / n u x t @ v u e u s e / c o r e e } x ) p m ] n o o , u r d ' x t u @ t l v . d e u c e s e o f : u n a s f u [ e i l / g t n . u t d x s e t f ' i , n e N u x t C o n f i g ( { まとめ テキスト選択以外にも、便利な機能が色々と使えるようなので、引き続き試してみたいと思います。 ...

概要 以下の記事で、vue3とbabylon.jsのやりとりを行うプログラムを作成しました。 今回は上記の発展版として、sceneに渡すmeshをvueから指定しています。以下のリンク先で内容をご確認いただけます。（途中、meshをうまく削除できていない箇所があります。今後修正予定です。） https://youtu.be/-dyQp-QX42I デモサイト https://nakamura196.github.io/nuxt3-babylonjs/10 ソースコード https://github.com/nakamura196/nuxt3-babylonjs/blob/main/pages/10/index.vue まとめ 参考になりましたら幸いです。

Nuxt 3でLeaflet Marker Clusterを試す機会がありました。実装例は以下です。 https://nuxt3-demo-nine.vercel.app/map-cluster 本実装にあたり、以下のページを参考にさせていただきました。 https://codesandbox.io/s/ns238 ソースコードは以下です。 https://github.com/nakamura196/nuxt3-demo 2023年3月時点においては、POC（Proof of Concept）の段階のようです。参考になりましたら幸いです。

概要 以下のように、Babylon.jsでクリックしたmeshの名前を取得する方法を調査しました。 以下のチュートリアルを参考にしました。 https://doc.babylonjs.com/communityExtensions/Babylon.js+ExternalLibraries/BabylonJS_and_Vue/BabylonJS_and_Vue_2#passing-data-from-babylonjs-to-vue-using-callbacks デモページは以下です。 https://nakamura196.github.io/nuxt3-babylonjs/8/ ページのソースコードは以下です。 https://github.com/nakamura196/nuxt3-babylonjs/blob/main/pages/8/index.vue 実装方法 以下の箇所で、createSceneにcallback変数を渡しています。fpsCallbackの名前は修正したほうがよいかもしれません。 https://github.com/nakamura196/nuxt3-babylonjs/blob/5c33d2e6bcd1681df17f3f12fea3cd68fc645157/components/Scene8.vue#L10-L13 そして、createScene関数において、onPointerDownの結果を渡すようにしています。 https://github.com/nakamura196/nuxt3-babylonjs/blob/5c33d2e6bcd1681df17f3f12fea3cd68fc645157/scenes/Scene8.js#L44-L49 まとめ よりよい実装方法があるかもしれませんが、参考になりましたら幸いです。