Nuxt

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

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 Omeka S and Omeka Classic are very useful tools for building digital archives and for humanities (informatics) research. https://omeka.org/ They come with a REST API as standard and have high extensibility through the addition of modules and plugins. Various existing assets can also be used, including IIIF-related tools, transcription support tools, and tools for handling spatiotemporal information. On the other hand, I (personally) feel that theme development for changing the appearance of sites requires knowledge of PHP and Omeka, making it relatively difficult. On this point, the Headless CMS approach, where the backend and frontend are separated, has been gaining popularity in recent years. ...

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

I have been demonstrating an example of using Mirador 3 with Nuxt 2 in the following GitHub repository. https://github.com/nakamura196/nuxt-mirador However, I found that the above repository had an issue in the production environment. Specifically, Mirador’s display would break after page navigation. An issue was submitted: https://github.com/nakamura196/nuxt-mirador/issues/1 A pull request fixing the bug was also submitted for this issue. https://github.com/nakamura196/nuxt-mirador/pull/2 Specifically, as shown below, it was necessary to unmount in beforeDestroy. ...

The explanation was found at the following link. https://develop365.gitlab.io/nuxtjs-2.8.X-doc/ja/api/configuration-watch/ e } x p g } w o e , a r . n f t t , e a c r l h d a l : e t b f e a [ a : c ' u k s l { : t t a t t { r i u c e ' , ] , By providing watch in the nuxt.config.js file as shown above, the target directory became a watch target as well. ...

本記事では、AWS x Nuxt.js x Elasticsearchを用いた検索アプリケーションの開発環境の構築について、説明します。備忘録の側面が強いです。 以下の構成を目指します。よりよい構成や構築方法があるかと思いますが、とりあえずAWSを用いて、検索エンジンにElasticsearchを使用したNuxt.js製のウェブアプリケーションの開発環境が整います。 Cultural Japanプロジェクトにおいても、上記とほぼ同様の構成を採用しています。 以下の流れで説明します。 準備（任意） AWSでドメインの取得やSSL/TLS化を行う方法です。 Route 53を用いたドメイン取得 独自ドメインの取得が必要な場合、Route 53でドメインの取得が可能です。 AWS Certificate Manager 次に、AWS Certificate Managerを用いて、SSL/TLS化を行います。こちらも手順に進めれば問題ありません。 なお、検証を行う際、以下の「Route 53でレコードを作成」ボタンをクリックして手続きすることで、簡単に進めることができました。 Backend Backendの構築から進めます。 Identity and Access Management (IAM)ユーザの作成 まず、Amazon OpenSearch Serviceにアクセス権限があるユーザを作成します。 作成後に表示される「アクセスキー」と「シークレットアクセスキー」をメモしておきます。 Amazon OpenSearch Service まず、Amazon OpenSearch Serviceを選びます。 その後は、以下のチュートリアルが参考になります。 https://docs.aws.amazon.com/opensearch-service/latest/developerguide/gsg.html 上記のマニュアルからの変更点として、アクセスポリシーは「ドメインレベルのアクセスポリシーの設定」を選択し、先に作成したユーザのARNを許可してください。 （ローカル）Pythonを用いたAmazon OpenSearch Serviceへのデータ登録 次に、上記で発行した「アクセスキー」と「シークレットアクセスキー」などを用いて、Amazon OpenSearch Serviceにデータ登録を行います。 具体的には、以下のGoogle Colabなどを参考にしてください。 https://colab.research.google.com/drive/1-uygvtQwoc3Wn4XSEUWN5Z5Hxq3vT9Gj?usp=sharing AWS SAM（Serverless Application Model） 次に、API GatewayとLambda 関数を作成します。具体的には、以下の記事を参考に、AWS SAM（Serverless Application Model）を利用します。 dev.classmethod.jp ...

概要 Nuxt.jsでvis.jsを使用する方法を紹介するGitHubリポジトリを作成しました。 github.com 以下のページから、デモサイトをご確認いただけます。 https://nuxt-visjs.netlify.app/ 詳細 Nuxt.jsはVue.jsをより効果的に使えるフレームワークです。 またvis.jsは、ネットワーク図やタイムラインを作成することができる可視化ライブラリです。 visjs.org 今回、Nuxt.jsでvis.jsを使用する方法を紹介するGitHubリポジトリを作成しました。 「Timeline」「Network」「Graph2d」による基本的な可視化例を掲載しています。 Nuxt.jsを用いたvis.jsの利用に際して、お役にたてば幸いです。