EN
ホーム 記事一覧 ブック DH週間トピックス 検索 このサイトについて
English
ホーム » Tags

Nuxt 3

Nuxt 3フレームワーク

Babylon.jsでVueを使用するチュートリアルをNuxt3で試す

Babylon.jsでVueを使用するチュートリアルをNuxt3で試す

概要 以前、Babylon.jsとNuxt3を組み合わせたリポジトリを作成しました。 一方、Babylon.jsでVueを使用するチュートリアルが以下で公開されています。 https://doc.babylonjs.com/communityExtensions/Babylon.js+ExternalLibraries/BabylonJS_and_Vue 今回は、上記サイトにある以下のチュートリアルをNuxt3で実装しました。 https://doc.babylonjs.com/communityExtensions/Babylon.js+ExternalLibraries/BabylonJS_and_Vue/BabylonJS_and_Vue_2 デモサイトは以下です。 https://nakamura196.github.io/nuxt3-babylonjs/ ソースコードは以下です。 https://github.com/nakamura196/nuxt3-babylonjs チュートリアル Passing data from BabylonJS to Vue using callbacks （日本語訳）これは、最も冗長ですが、最も安全で、最も拡張性と再利用性のあるアプローチです。基本的には、BabylonJSのシーンコードでメソッドを作成し、それに応じてエクスポートすることで、Vueコンポーネントにインポートし、それぞれを呼び出すことができるようになります。 https://nakamura196.github.io/nuxt3-babylonjs/third/ Passing data from BabylonJS to Vue using an exposed Engine object （日本語訳）ここでの大きな変更は、createSceneメソッドがEngineとSceneオブジェクトを返すことで、それらがVueコンポーネントに公開され、コンポーネントが直接それらにアクセスできるようになったことです。この2つのオブジェクトは、後でアクセスできるようにVueコンポーネントに保存されます。その直後に、FPSの値を1秒ごとに親のApp.vueコンポーネントに送信するインターバルを作成します。BabylonJS EngineのオブジェクトからFPSの値を直接Vueコンポーネントに取り込みます。 Sending data from Vue to BabylonJS with loose coupling and without exposing the BabylonJS objects to Vue （日本語訳）すでに書いたように、アクセスや操作が必要なものすべてに、メソッドを作成するだけです。（中略）BabylonJSのシーンファイルを修正し、これらのメソッドをエクスポートして、Vueコンポーネントでインポートできるようにします。 https://nakamura196.github.io/nuxt3-babylonjs/4/ Sending data from Vue to BabylonJS and vice versa with an exposed BabylonJS Vector3 object （日本語訳）この例では、公開されたBabylonJSのオブジェクトを使った通信を紹介します。最後のメソッドでは、EngineとSceneオブジェクトを公開します。公開できるのは、ごくわずかです。例えば、Scene全体を公開するよりも、Vector3だけを公開する方が、はるかに良い方法です。 ...

2023年2月17日 · 更新: 2023年2月17日 · 1 分 · Nakamura
Nuxt3のSSRをVercelでホスティングする（+ CORSの有効化）

Nuxt3のSSRをVercelでホスティングする（+ CORSの有効化）

Nuxt3のSSRをVercelでホスティングする機会がありましたので、その備忘録です。 ビルド設定について、以下のように、Output Directoryを.output/serverに設定する必要がありました。 またCORSを有効化するにあたり、以下の記事が参考になりました。 https://vercel.com/guides/how-to-enable-cors 具体的には、プロジェクトのルートに以下のフォルダを置くことで対応できました。 { "headers": [ { "source": "/api/(.*)", "headers": [ { "key": "Access-Control-Allow-Credentials", "value": "true" }, { "key": "Access-Control-Allow-Origin", "value": "*" }, { "key": "Access-Control-Allow-Methods", "value": "GET,OPTIONS,PATCH,DELETE,POST,PUT" }, { "key": "Access-Control-Allow-Headers", "value": "X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version" } ] } ] } 間違った記述もあるかもしれませんが、参考になりましたら幸いです。

2023年2月3日 · 更新: 2023年2月3日 · 1 分 · Nakamura
Babylon.jsとNuxt3とVuetifyを組み合わせて使用する

Babylon.jsとNuxt3とVuetifyを組み合わせて使用する

Babylon.jsとNuxt3とVuetifyを組み合わせて使用する機会がありましたので、その備忘録です。 構築したサイトは以下でご確認いただけます。 https://nakamura196.github.io/nuxt3-babylonjs/ ソースコードは以下です。 https://github.com/nakamura196/nuxt3-babylonjs 今回の組み合わせでアプリを開発される際の参考になりましたら幸いです。

2023年2月2日 · 更新: 2023年2月2日 · 1 分 · Nakamura
Nuxt3のssrでIIIF viewerを導入する

Nuxt3のssrでIIIF viewerを導入する

概要 Nuxt3のssrでIIIF viewerを導入する方法の備忘録です。 Canvas Panel 以下のビューアの導入です。 https://iiif-canvas-panel.netlify.app/ インストール npm i @digirati/canvas-panel-web-components page 以下を参考にしてください。 https://github.com/nakamura196/nuxt3-iiif-viewer/blob/main/pages/canvas-panel/index.vue 表示例 https://nakamura196.github.io/nuxt3-iiif-viewer/canvas-panel Tify 以下のビューアの導入です。 https://github.com/tify-iiif-viewer/tify インストール npm i tify page 以下を参考にしてください。 https://github.com/nakamura196/nuxt3-iiif-viewer/blob/main/pages/tify/index.vue ssrの場合、document is not defined.のエラーが発生したため、pluginsに以下のファイルを追加しています。 https://github.com/nakamura196/nuxt3-iiif-viewer/blob/main/plugins/tify.client.js 表示例 https://nakamura196.github.io/nuxt3-iiif-viewer/tify まとめ 他のビューアについても適宜追加していきたいと思います。 導入方法について、誤りやよりよい方法があるかもしれませんが、参考になりましたら幸いです。

2022年12月26日 · 更新: 2022年12月26日 · 1 分 · Nakamura
nuxt3をamazon lightsailで公開する：pm2の使用

nuxt3をamazon lightsailで公開する：pm2の使用

はじめに nuxt3などを用いて開発したアプリケーションについて、github pages, netlify, aws amplify, およびServerless Framework+Lambdaなどを用いてデプロイすることが多いのですが、今回はvpsを用いて公開する機会があり、その備忘録です。 参考 具体的には、Amazon Lightsailとpm2を使用します。 Amazon Lightsailインスタンスの作成 Node.jsのblueprintを選択します。 また3000番ポートを使用するので、ファイアウォールを開放しておきます。 pm2の設定 以下の記事を参考にしました。 https://it-evo.jp/blog/blog-70/ インストール sudo su npm install pm2 -g Nuxt3のダウンロードとビルド サンプルプログラムをダウンロードします。 su bitnami cd /home/bitnami/ git clone https://github.com/nakamura196/nuxt3-pm2 セットアップ cd nuxt3-pm2 npm install ビルド npm run build npm run preview localhost:3000 でNuxt3のアプリケーションをご確認いただけます。 pm2を用いて起動する cd /home/bitnami/ vi /home/bitnami/ecosystem.config.js module.exports = { apps: [{ name: 'demo', cwd: '/home/bitnami/nuxt3-pm2', exec_mode: 'cluster', instances: 'max', script: './.output/server/index.mjs', watch: ['./'], // または true watch_options: { followSymlinks: true, usePolling: true, interval: 10000, binaryInterval: 10000, }, env: { PORT: 3000, NODE_ENV: 'production', } }] } 以下のコマンドで、pm2が起動します。 ...

2022年12月22日 · 更新: 2022年12月22日 · 1 分 · Nakamura
[TEI x JavaScript] Nuxt3で意図しないWhitespaceを削除する

[TEI x JavaScript] Nuxt3で意図しないWhitespaceを削除する

課題 TEI/XMLファイルを読み込み、JavaScript（Vue.jsなど）で可視化を行う際、意図しないWhitespaceが入ってしまうケースがありました。 具体的には、以下のようなHTMLを書いた場合、 <template> <div> お問い合わせは <a href="#">こちらから</a> お願いします </div> </template> 以下のように表示され、「お問い合わせは こちらから お願いします」と意図しないスペースが入ってしまいました。 この課題に対して、以下のリポジトリで解決策を公開してくださっていました。 https://github.com/aokiken/vue-remove-whitespace ただ私の環境ではNuxt3ではうまく動作させることができなかったため、ソースコードを参考に、Nuxt3へ導入してみました。 以下、この備忘録です。 Nuxt3への導入 plugins/removeWhitespace.tsを作成します。 function isText(node: ChildNode) { return node.nodeType === Node.TEXT_NODE } function trimText(node: NodeListOf<ChildNode>) { Array.from(node).forEach((node) => { if (isText(node) && node.textContent) { node.textContent = node.textContent.trim() return } trimText(node.childNodes) }) } export default defineNuxtPlugin((nuxtApp) => { nuxtApp.vueApp.directive("removeWhitespace", { mounted(el: HTMLElement) { trimText(el.childNodes) }, updated(el: HTMLElement) { trimText(el.childNodes) }, }); }); そして、pages/index.vueなどで、v-remove-whitespaceディレクティブを使用します。 <template> <div v-remove-whitespace> お問い合わせは <a href="#">こちらから</a> お願いします </div> </template> その結果、以下のように、意図しないWhitespaceを削除できました。 まとめ ディレクティブの理解が不十分で誤っている点もあるかと思いますが、参考になりましたら幸いです。 以下、ソースコードとデモサイト（GitHub Pages）です。 ソースコード https://github.com/nakamura196/nuxt3-removeWhitespace デモサイト https://nakamura196.github.io/nuxt3-removeWhitespace/ なお、本題と話がそれますが、nuxt.config.tsを以下のように記述することで、baseURLを指定することができました。 export default defineNuxtConfig({ app: { baseURL: "/nuxt3-removeWhitespace", // /<reponame> }, }); Nuxt3のSSGをGitHub Pagesで公開する際の参考になりましたら幸いです。 ...

2022年10月25日 · 更新: 2022年10月25日 · 1 分 · Nakamura
Nuxt 3のserver/apiでjsonファイルを操作する方法の一例

Nuxt 3のserver/apiでjsonファイルを操作する方法の一例

Nuxt 3のserver/apiでjsonファイルを（インポートして）操作する方法の一例です。以下の記事を参考にしました。 https://github.com/nuxt/framework/discussions/775#discussioncomment-1470136 型定義などの改善の余地は多々ありますが、以下のような書き方で動作確認ができました。 // async/await を使用しています。 export default defineEventHandler(async (event) => { const items_: any = await import('~/assets/index.json') // .defaultをつける点に注意 const items_total: any[] = items_.default // 以下の参考リンクを参照してください。 const query = getQuery(event) const page: number = Number(query.page) || 1; const size: number = Number(query.size) || 20; const items: any[] = items_total.slice((page - 1) * size, page * size); return { "hits": { "total": { "value": items_total.length, }, "hits": items } } }); 上記により、例えば/api/items?page=2&size=40のようなクエリを用いることで、インポート元のjsonファイル（~/assets/index.json）の一部を返却することができました。パスはassets以外でも大丈夫のようですが、十分に検証できていません。 色々と改善の余地があるかと思いますが、参考になりましたら幸いです。 参考 https://v3.nuxtjs.org/guide/directory-structure/server/#handling-requests-with-query-parameters

2022年10月16日 · 更新: 2022年10月16日 · 1 分 · Nakamura
Nuxt3をNetlifyおよびAWSにデプロイする方法の一例

Nuxt3をNetlifyおよびAWSにデプロイする方法の一例

概要 Nuxt3をNetlifyおよびAWSにデプロイする方法の一例の備忘録です。 以下、構築例です。 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 ソースコードは以下です。 https://github.com/nakamura196/nuxt3 以下、それぞれについて説明します。 Netlify 以下の記事を参考にすることで、BFFを含むデプロイができました。 https://blog.cloud-acct.com/posts/nuxt3-netlify-deploy/ AWS（Serverless） Lambda Functions URLを使用する方法は以下の記事が参考になりました。 https://qiita.com/P3117/items/e2893804c3161a161a49 一方、今回はAPI Gatewayを使用する方法を示します。以下の記事が参考になりました。 https://stackoverflow.com/questions/73862456/nuxt-3-in-aws-lambda-with-serverless-framework 上記を参考にすることで、以下のようにデプロイすることができました。 https://9f4jl2wn81.execute-api.us-east-1.amazonaws.com/ こちらについて、カスタムドメインの設定を行います。以下、API Gatewayのみを使用する場合と、CloudFrontを用いる場合のそれぞれについて説明します。 API Gatewayのみ API Gatewayの「カスタムドメイン名」から、ドメイン名を作成します。 その後、APIマッピングから、上述のAPIを選択します。 そして、Route 53でレコードを追加します。 これにより、以下のように、カスタムドメインを用いて公開することができます。 https://nuxt3-apigateway.aws.ldas.jp/ CloudFrontを用いる場合 CloudFrontのディストリビューションの作成において、オリジンドメインにAPI GatewayのURLを入力します。 「デフォルトのキャッシュビヘイビア」の「ビューワー」では、「Redirect HTTP to HTTPS」を選択しました。 「設定」において、代替ドメイン名およびカスタムSSL証明書を指定します。 最後に、Route 53でCloudFrontのドメイン名を用いたレコード追加を行います。 これにより、以下のように、カスタムドメインを用いた公開を行うことができました。 https://nuxt3.aws.ldas.jp/ まとめ 他にもより良い方法があるかと思いますが、Nuxt3のデプロイに関して参考になりましたら幸いです。 またSPAやSSGとしてデプロイする場合には、GitHub Pagesを利用する方法もあるかと思います。 用途に応じて使い分けていきたいと思います。

2022年10月11日 · 更新: 2022年10月11日 · 1 分 · Nakamura
Nuxt 3とVuetify 3を用いたIIIF Image API関連ツールを作成しました。

Nuxt 3とVuetify 3を用いたIIIF Image API関連ツールを作成しました。

概要 Nuxt 3とVuetify 3を用いたIIIF Image API関連ツールを作成しました。本ツールを開発した背景として、IIIF Image APIを操作するニーズに加えて、Nuxt 3の使い方を学ぶ目的がありました。 GitHubリポジトリは以下です。参考になりましたら幸いです。 https://github.com/nakamura196/nuxt3-vuetify3 使い方 以下のURLからアクセスいただけます。 https://nv3.netlify.app/ 以下のように、「例」ボタンを押すと、画面上部のテキストフォームにURLが入力され、そのURLに含まれる要素（「region」や「size」など）が画面下部に表示されます。 IIIF Image APIを操作する際の参考になりましたら幸いです。

2022年6月7日 · 更新: 2022年6月7日 · 1 分 · Nakamura