Nuxt3

Overview Previously, I created a repository combining Babylon.js and Nuxt 3. Meanwhile, a tutorial for using Vue with Babylon.js has been published at the following link. https://doc.babylonjs.com/communityExtensions/Babylon.js+ExternalLibraries/BabylonJS_and_Vue This time, I implemented the following tutorial from the above site using Nuxt 3. https://doc.babylonjs.com/communityExtensions/Babylon.js+ExternalLibraries/BabylonJS_and_Vue/BabylonJS_and_Vue_2 The demo site is as follows. https://nakamura196.github.io/nuxt3-babylonjs/ The source code is as follows. https://github.com/nakamura196/nuxt3-babylonjs Tutorial Passing data from BabylonJS to Vue using callbacks This is the most verbose, but the safest, most extensible, and most reusable approach. Basically, you create methods in the BabylonJS scene code and export them accordingly, allowing you to import them in Vue components and call each one. ...

I had the opportunity to host Nuxt 3 SSR on Vercel, so this is a note for reference. For the build settings, I needed to set the Output Directory to .output/server as follows. For enabling CORS, the following article was helpful. https://vercel.com/guides/how-to-enable-cors Specifically, I was able to handle this by placing the following file at the root of the project. { } " ] h e { } a d " " ] e s h r o e { { { { s u a " r d " " " " : c e k k k k e r e e e e [ " s y y y y : " " " " " : : : : : " / [ " " " " a A A A A p c c c c i c c c c / e e e e ( s s s s . s s s s * - - - - ) C C C C " o o o o , n n n n t t t t r r r r o o o o l l l l - - - - A A A A l l l l l l l l o o o o w w w w - - - - C O M H r r e e e i t a d g h d e i o e n n d r t " s s i , " " a , , l " s v " " " a v v , l a a u l l " e u u v " e e a : " " l : : u " e * " " " " G X : E - } T C " , , S t O R r P F u T - e I T " O o N k } S e , , n P , A T X C - H R , e D q E u L e E s T t E e , d P - O W S i T t , h P , U T A " c c } e , p t , A c c e p t - V e r s i o n , C o n t e n t - L e n g t h , C o n t e n t - M D 5 , C o n t e n t - T y p e , D a t e , X - A p i - V e r s i o n " } There may be incorrect descriptions, but I hope this is helpful. ...

I had the opportunity to use Babylon.js combined with Nuxt3 and Vuetify, so this is a memo of my experience. The site I built can be viewed at the following URL. https://nakamura196.github.io/nuxt3-babylonjs/ The source code is available below. https://github.com/nakamura196/nuxt3-babylonjs I hope this is helpful when developing an app with this combination.

Overview This is a memo on how to introduce an IIIF viewer in Nuxt3 with SSR. Canvas Panel This section covers the introduction of the following viewer. https://iiif-canvas-panel.netlify.app/ Installation n p m i @ d i g i r a t i / c a n v a s - p a n e l - w e b - c o m p o n e n t s Page Please refer to the following. ...

Introduction When deploying applications developed with Nuxt 3 and similar frameworks, I often use GitHub Pages, Netlify, AWS Amplify, and Serverless Framework + Lambda. However, this time I had the opportunity to deploy using a VPS, so this is a memo. References Specifically, I use Amazon Lightsail and pm2. Creating an Amazon Lightsail Instance Select the Node.js blueprint. Also, since port 3000 is used, open the firewall for it. ...

Problem When loading TEI/XML files and visualizing them with JavaScript (such as Vue.js), there were cases where unintended whitespace was inserted. Specifically, when writing HTML like the following: < t / e < t m d / e p i お < お d m l v 問 a 願 i p a > い い v l t 合 h し > a e わ r ま t > せ e す e は f > = " # " > こ ち ら か ら < / a > It was displayed as shown below, with unintended spaces inserted: “お問い合わせは こちらから お願いします”. ...

This is an example of how to manipulate (import and use) JSON files with Nuxt 3’s server/api. The following article was used as a reference. https://github.com/nuxt/framework/discussions/775#discussioncomment-1470136 While there is much room for improvement in areas such as type definitions, the following approach was confirmed to work. e } x ) p c c c c c c r } ; a o o o o o e s r n n n n n n t " } y t s . s 以 s s s s u h n t d t 下 t t t t r i " } " c d e の n t t , h / e i f i 参 q p s i s o " i a f t a t 考 u a i t { " t v t w a e u e リ e g z e : a a s a u m l m ン r e e m l l " i l s t s ク y : : s { " u : t t _ を _ を : : e : つ t 参 = n n " i を d け o 照 u u a { : t 使 e a る t し g m m n e 用 f n 点 a て e b b y i m し i y に l く t e e [ t s て n 注 : だ Q r r ] e い e = 意 さ u m ま E a い e = = = s す v a n 。 r _ 。 e w y y N N i t n a [ ( u u t o t i ] e m m e t H t v b b m a a = e e e s l n i n r r _ . d m i t ( ( t l l p t ) q q o e e o e u u t n r r m e e a g ( t s r r l t a ( _ y y . h s ' . . . s , y ~ d p s l n / e a i i c a f g z c s a e e e ( s u ) ) ( e e l ( v t t p e s a n / g t i 1 2 e ) n ; 0 d ; - = e > x 1 . ) { j s o n s ' i ) z e , p a g e s i z e ) ; With the above, by using a query like /api/items?page=2&size=40, it was possible to return a portion of the imported JSON file (~/assets/index.json). Paths other than assets seem to work as well, but this has not been thoroughly verified. ...

Overview This is a personal note on an example of deploying Nuxt 3 to Netlify and AWS. Below are the deployment examples. Netlify app.vue https://nuxt3-nakamura196.netlify.app/ server/api/hello.ts https://nuxt3-nakamura196.netlify.app/api/hello AWS (Serverless) app.vue https://nuxt3.aws.ldas.jp/ server/api/hello.ts https://nuxt3.aws.ldas.jp/api/hello The source code is at the following URL. https://github.com/nakamura196/nuxt3 I will explain each of them below. Netlify By referring to the following article, I was able to deploy including BFF (Backend for Frontend). https://blog.cloud-acct.com/posts/nuxt3-netlify-deploy/ AWS (Serverless) The following article was helpful for the method using Lambda Functions URL. ...

Overview I created an IIIF Image API tool using Nuxt 3 and Vuetify 3. The background for developing this tool was a need to work with the IIIF Image API, as well as the purpose of learning how to use Nuxt 3. The GitHub repository is as follows. I hope it serves as a useful reference. https://github.com/nakamura196/nuxt3-vuetify3 Usage You can access it from the following URL. https://nv3.netlify.app/ As shown below, pressing the “Example” button inputs a URL into the text form at the top of the screen, and the elements contained in that URL (such as “region” and “size”) are displayed at the bottom of the screen. ...