Nuxt3

Overview I performed a large-scale dependency package update, including a major update from Nuxt 3.2.3 to 3.20.2. Major Package Updates Package Before After 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 Newly Added Packages better-sqlite3: ^12.5.0 - Dependency of @nuxt/content v3 vue-i18n: ^11.0.0 - Dependency of the i18n module Changes That Required Action 1. Migration to @nuxt/content v3 Creating a new content.config.ts was required. ...

Overview (Created by ChatGPT) The Nuxt i18n module has a feature that detects the user’s browser language and redirects them to the appropriate language page. However, in certain situations you may want to disable this feature. This article explains how to completely disable browser language detection using detectBrowserLanguage: false. https://v8.i18n.nuxtjs.org/guide/browser-language-detection Configuration To disable the browser language detection feature, set the detectBrowserLanguage option to false in your nuxt.config.js file. 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 { Use Cases Where This Is Helpful When you want users to directly access specific URLs: If you intend for users to directly visit specific content, redirects can be an obstacle. Optimizing crawling: When you want search engine crawlers to be able to directly access specific language pages. Consistent user experience: For example, when you want to avoid unexpected redirects for users navigating between linked language pages. Summary By using detectBrowserLanguage: false, you can control site access for user experience and SEO optimization without relying on redirects. Using this setting in appropriate situations can improve your site’s usability. ...

Overview This is a memo on how to address the error “Cannot find name ‘queryContent’.” that occurred in Nuxt Content. Cause It appears that Nuxt Content v3 was released on 2025/1/16. https://content.nuxt.com/blog/v3 As a result, queryContent has been changed to queryCollection and similar. Solution As described in the following, it appears necessary to create a content.config.ts file and change to using queryCollection and similar. https://content.nuxt.com/blog/v3#️-content-collections By applying the above changes, the error was resolved. ...

Overview I had the opportunity to try local authentication with @sidebase/nuxt-auth, so this is a personal note for future reference. Background In the following article, I introduced how to perform Drupal authentication using @sidebase/nuxt-auth. In that article, I was using Nuxt 3’s SSR with the authjs provider of @sidebase/nuxt-auth. The provider descriptions are as follows. 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. ...

Overview This describes how to authenticate with Drupal using Nuxt 3 and @sidebase/nuxt-auth. Background The following article introduced a method for authenticating with GakuNin RDM. The following article introduced a method for using Drupal OAuth from Next.js. Using these as reference, we use Drupal OAuth from Nuxt 3. Method The source code can be found in the following repository. https://github.com/nakamura196/nuxt-rdm Specifically, the implementation is here. 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 U 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 } e p ) f U A x p r C t c a n r ( p j n ; 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 s f N r ( _ S u ` P f e e o t a o c n e u i o n u ) U C t , a i C n A l c a ( q b 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 a p a , C u , l s . i " d U . n t s r i l p ( d g " e r e / e l i a { r ( , " l n x f t f e l u ) , v - P a h e P n C p . . w a i e r r U t l a d D w r l r o s I i l r R w s e u e v e d e C u U - e d s d i , n l p P f : e _ d p t i a A o t r u e r S e l L r h $ ' s d o e n C _ m e { s e " f c t l T - r r , i r I i O u r e u n l e d e K r e s n a e t , n E l s . i m , t N e p s q e U S _ n o t u F R e U c n a e a L c R o s t l r L d e u I l a e e s D " b s t d b T U a , " o e n c i , d x k k m " y t n a " } o w g , o ` w h e n ) n e { c ; n ( e U a s n d e o j r u " e s , m t a i a l s S n e e t e d n e a d m ) e p r i o r i t y Summary There may be some errors, but I hope this serves as a helpful reference. ...

Overview I created a sample repository using @elastic/search-ui with Nuxt. https://github.com/nakamura196/nuxt-search-ui-demo You can try it from the following URL. https://nakamura196.github.io/nuxt-search-ui-demo Background @elastic/search-ui is described as follows. 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. A sample repository using Vue.js is published at the following link. https://github.com/elastic/vue-search-ui-demo This time, I created a sample repository using Nuxt, based on the above repository. ...

Overview This is a memo on how to bring a specified marker to the front in nuxt3-leaflet. Method By using the z-index-offset attribute on LMarker as shown below, I was able to bring a specified marker to the front. < 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 " Summary I hope this is helpful when using nuxt3-leaflet. ...

Overview There are several ways to create a sitemap in Nuxt 3, so here are my notes. [1] @nuxtjs/sitemap Documentation https://sitemap.nuxtjs.org/ Reference Article https://zenn.dev/kumao/articles/3fe10078a7e9d2 Installation n p m i n s t a l l - D @ n u x t j s / s i t e m a p Repository https://github.com/nuxt-community/sitemap-module [2] sitemap Reference Article https://zenn.dev/kakkokari_gtyih/articles/db1aed4fed6054 Installation n p m i n s t a l l - D s i t e m a p Repository https://github.com/ekalinin/sitemap.js ...

Overview I created a sample repository using Nuxt3, Vuetify, and Cesium. Source Code vue-cesium is used. https://github.com/zouyaoji/vue-cesium The GitHub repository is as follows. https://github.com/nakamura196/nuxt3-vuetify-cesium Demo Site https://nakamura196.github.io/nuxt3-vuetify-cesium/ Summary We hope this serves as a useful reference.

Overview I tried out Nuxt 3 and Decap CMS, so here are my notes. https://decapcms.org/ Preparing the Nuxt 3 Project I referred to the following for adding Decap CMS to an existing site. https://decapcms.org/docs/add-to-your-site/ First, prepare a Nuxt 3 project that includes the nuxt/content module. Here is an example of the source code. https://github.com/nakamura196/nuxt3-decapcms The following two files were created. # 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 > Then, it was pushed to GitHub. ...

Overview In the following article, I introduced how to use Leaflet Marker Cluster with Nuxt 3. This time, I updated it to use the Composition API, so here are my notes. Installation Install the following: 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 Source Code Please refer to the following: ...

Overview I added a Cytoscape demo to a sample repository using Nuxt3 and Vuetify. https://github.com/nakamura196/nuxt3-demo You can check it working on the following page. https://nakamura196.github.io/nuxt3-demo/ Installation I ran the following. 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 Source Code < 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 > } , Summary I hope this is helpful. ...

When running npx nuxi typecheck in Nuxt3, the following error occurred. 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 > ' . As a solution, as described in the following documentation, it was necessary to install two libraries. ...

I wanted to watch URL query changes with watch in Nuxt3, so I wrote the following code, but the watch did not work when the URL query changed. < 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 ' ] ) So I referenced the following article. ...

Overview I created a sample repository using CETEIcean and Nuxt 3. https://github.com/TEIC/CETEIcean I referenced the following issue. https://github.com/TEIC/CETEIcean/issues/27 The script introduced there did not work with CETEIcean v1.8.0, so I created a minimal repository that works with CETEIcean v1.8.0 and Nuxt 3. Demo Page https://nakamura196.github.io/ceteicean-nuxt3 Source Code https://github.com/nakamura196/ceteicean-nuxt3 Main File https://github.com/nakamura196/ceteicean-nuxt3/blob/main/app.vue Summary I hope this serves as a useful reference. I would also like to express my gratitude to those who developed CETEIcean. ...

Overview I created examples of using OpenSeadragon and OpenSeadragon SVG Overlay with Nuxt3. The image used is (Catfish with Ofuda on Kaname-ishi) “National Diet Library Collection”. OpenSeadragon https://nuxt3-demo-nine.vercel.app/osd OpenSeadragon SVG Overlay https://nuxt3-demo-nine.vercel.app/osd-svg Method A key point was preparing a plugin file as shown below. This resolved issues that occurred during SSR. https://github.com/nakamura196/nuxt3-demo/blob/main/plugins/osd.client.js For the SVG overlay implementation, I referenced the following. https://github.com/openseadragon/svg-overlay/blob/master/openseadragon-svg-overlay.js Summary There may be better ways to write this, but I hope it is helpful for using OpenSeadragon with Nuxt3. ...

Overview This is a personal note on using VueUse for implementing text selection functionality with Nuxt 3 (Vue 3). https://vueuse.org/ Demo You can try it from the following page. https://nuxt3-demo-git-main-nakamura196.vercel.app/textSelection The source code is at the following URL. https://github.com/nakamura196/nuxt3-demo/blob/main/pages/textSelection.vue Installation Method The installation instructions are described on the following page. https://vueuse.org/guide/ The specific steps are as follows. 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 ( { Summary In addition to text selection, there seem to be many other useful features available, so I would like to continue trying them out. ...

Overview In the following article, I created a program for interaction between Vue 3 and Babylon.js. This time, as an advanced version of the above, the mesh to be passed to the scene is specified from Vue. You can check the content at the following link. (There are some parts where meshes are not properly deleted. This is planned to be fixed in the future.) https://youtu.be/-dyQp-QX42I Demo Site https://nakamura196.github.io/nuxt3-babylonjs/10 ...

I had the opportunity to try Leaflet Marker Cluster with Nuxt 3. The implementation example is as follows. https://nuxt3-demo-nine.vercel.app/map-cluster For this implementation, I referenced the following page. https://codesandbox.io/s/ns238 The source code is at the following URL. https://github.com/nakamura196/nuxt3-demo As of March 2023, it appears to be at the POC (Proof of Concept) stage. I hope this serves as a useful reference.

Overview I investigated how to get the name of a mesh clicked in Babylon.js, as shown below. I referenced the following tutorial. https://doc.babylonjs.com/communityExtensions/Babylon.js+ExternalLibraries/BabylonJS_and_Vue/BabylonJS_and_Vue_2#passing-data-from-babylonjs-to-vue-using-callbacks The demo page is as follows. https://nakamura196.github.io/nuxt3-babylonjs/8/ The source code for the page is as follows. https://github.com/nakamura196/nuxt3-babylonjs/blob/main/pages/8/index.vue Implementation In the following section, a callback variable is passed to createScene. The name fpsCallback might need to be revised. https://github.com/nakamura196/nuxt3-babylonjs/blob/5c33d2e6bcd1681df17f3f12fea3cd68fc645157/components/Scene8.vue#L10-L13 Then, in the createScene function, the result of onPointerDown is passed. ...