3
票
承認済み
SSRに関する疑問点
1. SSR は何故早いか
SSR だと、ユーザーがサーバーから受信する html ファイルには、既に初期描画が完了した dom を書き出したようなものが記述されています。これにより、通常の Web ページと同じように、 html ファイルを受信する端から描写を開始することができます。
一方、 CSR だと html ファイル(の <body>)は最初ほぼ空で、そこから SPA ...
2
票
承認済み
Docker RailsのCORS設定について
Cross Originはscheme, host, portのいずれか一つでも異なる場合にその扱いになります。
サーバー側はhttp://localhost:7000に対して、クライアント側(ブラウザ)はhttp://localhost:5000です。
schemeはhttp、hostはlocalhost、portは5000と7000でportが異なることからCross ...
2
票
Vue.jsと比べてNuxt.jsがどう違うのかがわかりません
NuxtJS は Vue.js プロジェクトのバックボーンであり、柔軟でありながら自信を持ってプロジェクトを構築するための構造を提供します。
主な機能
コードを自動的に分割すること
サーバーサイドレンダリング
非同期データをハンドリングするパワフルなルーティング
静的ファイルの配信
ES2015+ のトランスパイレーション
JS と CSS のバンドル及びミニファイ化
...
2
票
承認済み
文字列を返すメソッドで値がない場合、 null / undefined / 空文字列のいずれを返すべきか
私の場合は空文字で返すことが多いです。
もし代入されていないことを表現したい場合はnullを使います。undefinedは自分から利用はしません。
Javascriptの場合はstringであってもオブジェクトですので、プロパティもありますしいくつかのメソッドも存在します。
つまりstring型で返さないと、それらのプロパティやメソッドはnullやundefinedが渡ってきた場合、...
2
票
承認済み
NuxtとReactには、Vue CLI 3のような、便利な雛形作成ウィザード 兼 ビルドボタンを含むGUIは存在しますか?
雛形作成ツールに関しては以下のものが対応するでしょう。
nuxt: create-nuxt-app - https://github.com/nuxt/create-nuxt-app
react: create-react-app - https://github.com/facebook/create-react-app
ファイル名の付け方、ファイルの配置について自由度が高いことを、...
2
票
承認済み
nuxt2 と nuxt3 の対応関係について
nuxt 3 をしばらく触っていないのですが、多分以下の感じになる気がしています。
<script setup lang="ts" >
// 勝手に template で使えるようになる。
// ~/components に入れている場合は、 global 登録されるので不要になる。
import HogeComponent from '~/path/to/...
1
票
Nuxtで開発中のアプリでpdfmakeライブラリをインストール後、./node_modules/pdfmakeディレクトリでnpm run buildが実行できないです。
こちら、結局
npm run build
を実行することはできなかったのですが、
PDFMAKE公式マニュアルを参考にして、vfs_fonts.jsを新たに作成し、 それを任意のディレクトリに配置し、IMPORTすることで新しいフォントを利用することができるようになりました。
1
票
特定のNuxt.jsプロジェクトでrun devした際に高確率でロードに失敗する
自己解決しました。nuxt2.4を使っていたのですがバージョン依存のバグだったようです。
最新版では解決されています。
1
票
承認済み
Nuxt.jsのstore配下のディレクトリ構成について
ディレクトリ構成に対する回答は無数にあります。また、どれが一般的で、どれが理想的かもユースケース次第になります。
ディレクトリ設計やStore/State/Actionなどの分割単位を決定するには、今実装している対象(サービスや業務ロジック)に対する深い理解が必要です。これは小手先のテクニックでできるようなものではなく、とても多くの時間をかけて考える部類に入る内容になります。
なぜならば、...
1
票
v-data-tableの行番号を取得したい。
利用されているitemのslotで行indexがあるようなのでそちらを利用したらよさそうです
https://vuetifyjs.com/ja/api/v-data-table/#api-slots
<v-data-table :headers="headers" :items="todos">
<template v-slot:...
1
票
NUXTでのKEY情報の隠蔽について
nuxt build を実行した時に、 .nuxt/dist/client が作成されると思っていますが、もし api キーなどが client に漏れていれば、そこで grep かければ多分見つかると思います。
client 側の js を webpack でビルドしたものが、このディレクトリの中身である、という自分の理解です。(100%の自信がある訳ではないです。多分、ぐらいの感じです)
1
票
承認済み
Nuxt.jsでのルーティングである親Layout下で特定の箇所をアドレスの変更によって動的に部分的に変更したい。nuxt-child?
こちらのページが求めているサンプルになるのではないでしょうか(Open Sandboxから実際に触れます)
https://ja.nuxtjs.org/examples/routing-nested-pages/
NuxtChildコンポーネントを使いページをネスト表示できます
nuxt.jsはデフォルトではpagesフォルダ内のファイル構成でルートファイルを生成します
npm run dev ...
1
票
Nuxt.js(Vue.js)+typescript で記述されたコードに理解できない部分がある
アロー関数でreturnを省略する場合の短縮構文です。もし、()がない場合、文の列として構文解析されます。
以下のmyFunc1とmyFunc2は同じ返り値を提供します。
const myFunc1 = (slugId1: string, slugId2: string) => ({
name: "slug1-slugId1-slug2-slugId2",
...
1
票
承認済み
1
票
Nuxtでの「is not defined」の解決方法を探しています。
maxCount = 0をlet maxCount = 0に変更してみてはいかがでしょうか。maxWeaponも同様です。
参考記事はJavaScriptで書かれているので本来ローカル変数としてvarをつけて(Vueの場合はlet)宣言するべきところを、何もつけないでグローバル変数として宣言してもエラーがでない場合がありますが、...
1
票
Nuxt SSR時のstoreの永続化が出来ない
公式を参考にすれば簡単に実装できますよ。
下記に公式をベースにFirebaseAuth用の認証画面サンプル作りましたので
参考にして頂ければと
https://github.com/Ittan888/nuxt-firebase-auth-sample
1
票
interfaceのプロパティがParsing error: Unexpected token
コメントしていただいた皆様ありがとうございました。
自己解決できました。
eslintのparserをtypescript-eslint-parserにしたら解決しました。
1
票
一つのコンポネントを複数使う場合、同じpropsが表示される。
vuexは複数のコンポーネント間で同じ値を共有したい時に使います。vuexはSingletonになります。同じコンポーネントでも異なる値をもたせたいなら、コンポーネント内のdataに持たせるべきです。
なので、vuexを使わないほうが正しいです。
逆にどうしても使いたい場合は、以下のように各項目ごとのstateを用意してあげる必要があります。
export const state = () =&...
1
票
承認済み
NuxtのSSRデプロイについて
基本的にはVPSにデプロイする場合でもPaaSにデプロイする場合でも基本的な部分は変わりません。
構成は条件によって多々あるでしょうが、一般的には
(プロジェクトのルートディレクトリをgitで管理してるとして)
gitでプロジェクトを丸々サーバー上に配置し
デプロイ時にyarn install
アセットのビルド(yarn build)等をし
サーバープロセス(expres等)の再起動
...
1
票
Nuxt.jsでslugに応じたコンテンツを表示する際のエラー/リロード又はURL直打ちでエラー
slugというかパラメーターは
$route.params.
で取得できますよ。
バリデーションかける場合はこの様にするようです。
基本、外部データの読み込みはasyncDataでaxiosなりを使って
読みこむのが良いのかと思います。
無効化に投票
関連するタグ
nuxt.js × 58vue.js × 37
javascript × 20
typescript × 7
axios × 7
ruby-on-rails × 4
docker × 3
webpack × 3
eslint × 3
aws × 2
firebase × 2
aws-sdk × 2
php × 1
html × 1
node.js × 1
reactjs × 1
spring-boot × 1
heroku × 1
google-chrome × 1
security × 1
amazon-s3 × 1
npm × 1
docker-compose × 1
pdf × 1
デプロイ × 1