Nuxt

Overview In a Nuxt 3/4 + Nuxt Content environment with trailingSlash: "append" configured, links to static files such as PDFs and images within content may result in 404 errors. Conditions for Occurrence This occurs when all of the following conditions are met: Using Nuxt 3/4 + Nuxt Content trailingSlash: "append" is set in nuxt.config.ts There are links to static files (PDFs, images, etc.) in Markdown or content Problem Details Symptoms When writing a link like the following in content: ...

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. ...

Introduction When performing Static Site Generation (SSG) with Nuxt 4, you may want to load data from local JSON files to generate static pages. However, it is not as simple as Next.js’s getStaticProps, and there are several pitfalls to be aware of. This article introduces the correct approach discovered through trial and error. Problem: Why Simple fs Reading Doesn’t Work First Approach (Failed) c } o ; n i } c r ❌ s f o e t c c c c r n t T ( o o o o e C s u h f i n n n n t l t r i e m s s s s u i n s t p t t t t r e r c o n n e a d h r f p f d t s w o L t s a u a J p a e o . t l t S s o i s c m = h l a O i n t n a e P N d s ' l t a = a = . e e r t D a w t p e a . a a h f a = s w t s i w s r p o a e t a = . s a o r r i r e w n k = v i t p e ( a s e m a a d i e a r p i t d a t . s ) o m h F t j y r p . i a f s n { t o r l ) e o c ( r e e ; t n ' t s S c ( ( f ( o y h ) f s ' l n ( ; i ' p v c ` l ) a e ( / e ; t ( f d P h p u a a ' r l t t ) o l a h ; c P / : e a $ s t { s s h f t . , i r c l i w ' e n d u P g ( t a ) ) f t , - h = 8 } > ' ' ` p ) ) { u ; ; b l i c / d a t a ' , f i l e P a t h ) ; This approach has the following problems: ...

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 This article describes how to authenticate with GakuNin RDM using Nuxt 3 and @sidebase/nuxt-auth. Demo App https://nuxt-rdm.vercel.app/ Repository https://github.com/nakamura196/nuxt-rdm Notes Initially, the following warning was displayed. AUTH_NO_ORIGIN: No origin - this is an error in production, see https://sidebase.io/nuxt-auth/resources/errors. You can ignore this during development Therefore, based on the following reference: https://auth.sidebase.io/resources/error-reference I configured it as follows, which resulted in an error. a } u , t b h a : s e { U R L : p r o c e s s . e n v . N E X T A U T H _ U R L , The cause was that I was using an rc version of the library. ...

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 This is a memo about important considerations when using sidebase/nuxt-auth in a production environment. sidebase/nuxt-auth is an authentication module for Nuxt 3 applications. https://github.com/sidebase/nuxt-auth Problem When deploying to Vercel or AWS Amplify, a server error occurred with the following message. A U T H _ N O _ O R I G I N : N o ` o r i g i n ` - t h i s i s a n e r r o r i n p r o d u c t i o n , s e e h t t p s : / / s i d e b a s e . i o / n u x t - a u t h / r e s o u r c e s / e r r o r s . Y o u c a n i g n o r e t h i s d u r i n g d e v e l o p m e n t Solution The following was helpful. ...

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. ...

Overview As shown in the following image, I had the opportunity to display XML text data using Nuxt3, so this is a memo. Installation I used the following two libraries. n n p p m m i i x h m i l g - h f l o i r g m h a t t . t j e s r Usage I created the following file as a Nuxt3 component. It formats XML strings with xml-formatter and then applies syntax highlighting with highlight.js. ...

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 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 I encountered an error when attempting to load a .glb file in Nuxt3 x babylon.js, so this is a memo of how I resolved it. Error Details The following error occurred: Unable to load from ./models/test.glb: importScene of undefined from undefined version: undefined, exporter version: undefinedimportScene has failed JSON parse Solution The issue was resolved by additionally installing the following package: n p m i n s t a l l @ b a b y l o n j s / l o a d e r s As a result, I was able to display the model with the following JavaScript file: ...