Open4

Nuxt.js

  • Nuxt.js
  • バージョン
    • nuxt: ^2.15.8
    • vue: ^2.6.14
  • コンポーネントを 1 つの vue ファイル(単一ファイルコンポーネント)として作成し組み合わせる
  • ページ、レイアウト以外のコンポーネントは/componentsフォルダに作成
  • 単一ファイルコンポーネント:1 つのコンポーネントに対する HTML(template)、JavaScript(script)、CSS(style) を定義
    • 必ずルート要素が 1 つ
  • https://b1san-blog.com/post/nuxtjs/nuxt-component/
  • yarn devの立ち上がりに時間がかかる
  • computedとmethodsの違い
    • https://zenn.dev/naoki_oshiumi/articles/8c99581ca5bdd0
    • 違いはキャッシュ機能の有無
      • computedにキャッシュ機能有り:データが変わらない限りは再計算されない
        • リアクティブなデータは基本computed
        • 乱数や日付等の都度変わるものはcomputedだと変更されないのでmethodsで
      • methodsはデータが変わらない場合でもページをリロードする度に新しく実行される
        • api呼び出し、モーダル表示、ページ遷移などデータ加工・計算以外の処理
    <no-ssr>
      <VueRecordAudio @result="onResult" />
    </no-ssr>
  • Auth0とNuxt.jsで認証ページを作る
    • メリット
      • 個人情報をこちらで持つ必要がない
      • 認証部分を実装する必要がない(Auth0側でフォーム等用意してくれる)
    • デメリット
      • Auth0が落ちるとサービスの認証機能が使えなくなる
    • https://abillyz.com/vclbuff/studies/124
    • githubでのOAuth認証
    • バックエンドとの連携
      • 認証済のユーザかを、auth0が発行したトークンを元にバックエンド(API)でチェックしてOKならデータを返す
      • データとユーザの紐付けを行う為にユーザテーブルをバックエンドでもたせる必要がある
        • Auth0のIDである「sub」をもたせる
    • https://zenn.dev/tasuya/articles/cb2742c819eb1e
    • https://qiita.com/unhurried/items/e9f751dcdfc0900947ee
      • 漏洩時の影響が大きいリフレッシュトークンを扱う処理をWeb Workerに分離するアプローチを採っている。(リフレッシュトークンに関する処理はSDK利用者が意識する必要がないため、SDKで隠蔽しやすいということもある。)
$ npx create-nuxt-app study-record-front

create-nuxt-app v4.0.0
✨  Generating Nuxt.js project in study-record-front
? Project name: study-record-front
? Programming language: JavaScript
? Package manager: Yarn
? UI framework: None
? Nuxt.js modules: Axios - Promise based HTTP client
? Linting tools: ESLint
? Testing framework: Jest
? Rendering mode: Single Page App
? Deployment target: Static (Static/Jamstack hosting)
? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Continuous integration: GitHub Actions (GitHub only)
? What is your GitHub username? bz0
? Version control system: Git
ログインするとコメントできます