Nuxt 2 - The Intuitive Vue FrameworkThe Intuitive Vue Framework Nuxt を使って信頼ある次世代の Vue.js アプリケーションを構築する Web 開発をシンプルにかつパワフルにするオープンソースフレームワーク
【Nuxt.js】Nuxt文法編：asyncData | aLiz Nuxt
Q. 非同期処理ってなんですか？ A. コンビニの店員さんが、「温めますか？」と言った後、温めてる間に別のお客さんの会計やりつつ、温め終わったら商品くれるやつ — いちくん (@tips__web) July 16, 2020 温めた商品が手元にくる前に 会計を先に済ませることができる というわけです！ これが同期処理なら 温めてる間はずっと店員さんが レンジの前にいて、 温め終わってからでしか会計できません。 コードでいうなら… ⬇️の例でご覧ください🌟👀 Promise Promiseとは 値が今すぐは返せないけど、 その間に仕事はできるし、 後でちゃんと返すから！！ という物です💡 効率よく仕事を回せる、できる人✨🙋♀️ そんなイメージです。 簡単な例 自分のIPアドレスを表示させるjsonファイル http://icanhazip.com を使用しています🌟 解説 aw
Nuxt JSのコンテンツを多言語化する方法
2023年2月7日 JavaScript, Nuxt JS Nuxt JSで作成されたプロジェクトをi18nというプラグインを使って多言語化に対応する方法を紹介します。あまり実装する機会はないかと思いますが、自分用に備忘録として。自動的に翻訳してくれるわけではなく、言語ファイルを用意して切り替えるという仕様です。すでにNuxt JSでプロジェクトを作成していることを前提に書いていきます。 ↑私が10年以上利用している会計ソフト！ i18nをインストールする 公式サイトを参考に、yarn または npm でインストールします。 Yarn yarn add nuxt-i18n NPM npm i nuxt-i18n 言語ファイルを作成 今回は英語と日本語のWebサイトを作成していく手順を紹介します。プロジェクトの第一階層に「lang」フォルダーを作成し、その中に英語版を「en.js」、日本語版
【Nuxt.js/axios】別ドメインへのajaxがCORS policyで弾かれる問題の対応 - フリーランチ食べたい
ここのところNuxt.jsで開発を行っていて、詰まったところがあったので記載しておきます。 TL;DR 現状axios/devサーバーのヘッダー設定だけでは解決できません。(調べた限り) devサーバー側でaxiosのproxyの設定を行う必要があります。 環境 vue@2.6.2 nuxt@2.4.2 axios@0.18.0 課題 問題設定をハッキリさせておきます。 下の図のようにローカルでの開発時にブラウザから外部のAPIサーバーにリクエストを送った際にCORS policyでブロックされてしまう問題です。 自分と同じ状況であれば このようにアクセスしたときに axios.get('http://api.example.com/hello') 下のようなエラーメッセージが出ていると思います。 Access to XMLHttpRequest at 'http://api.exampl
Nuxtに「serverMiddleware」を設定して、API サーバ的な動きをさせてみた | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、フロントエンドエンジニアのライダーです。 2018年秋、Nuxt 2がリリースされましたね。しかも、イベント中のライブリリースだったとのこと。公式のTwitterアカウントに発表の様子がアップされていました。 Live releasing of Nuxt.js 2.0 at @vue_london 💪🏻 pic.twitter.com/jhasarJkvo — Nuxt.js (@nuxt_js) 2018年9月21日 すごい……。 さて今回は、そんなNuxtのserverMiddlewareを使った、API サーバっぽいものの設定をご紹介します。 Nuxtの「serverMiddleware」とは? 公式Docs：https://ja.nuxtjs.org/api/configuration-servermiddleware/ serverMiddlewareでは、 Nu
Nuxt.jsにnuxt-i18nを導入して国際化に対応する - 独学プログラマ
2020.07.22に公開 2020.08.20に更新 Udemy 9. Nuxt.jsフロント開発事前準備 No.4 / 4 今回達成すること Nuxt.jsにi18nモジュールを導入し、index.vueに翻訳結果を表示します。 完成イメージ i18nとは? i18nはアプリを多言語化対応するために使われるモジュールです。 このモジュールを使えば「login」の文字列を日本語の「ログイン」に簡単に翻訳できます。 「front」ディレクトリでブランチ切っとく 作業に移る前に「front」ディレクトリに移動してブランチを切ります。 root $ cd front front $ git checkout -b 20200722_add_nuxt-i18n front $ git branch * 20200722_add_nuxt-i18n front $ cd .. nuxt-i18nを
少し詳しく読み解いてみる Nuxt TypeScript での asyncData とその周辺 | VirtualCast Blog
こんにちは。UI/UXデザインを担当しているsadakitchenです。 最近はWebのフロントエンドも携わっています。 バーチャルキャストのWebフロントでは Nuxt.js や vue を活用しており、パフォーマンスの高いアプリケーションを構築しています。 更に、 TypeScript によって型安全性による恩恵を得るために Nuxt TypeScript を使っています。 （参考記事：nuxt.js による UX/DX フレンドリーな Web サービス開発） 今回は Nuxt TypeScript でよく使っているメソッド asyncData とその周辺について少し詳しく読み解いてみます。 なお、Nuxt＆TypeScriptの環境構築については本記事では取り扱いません。 以下のような記事を参照してみてください。 3分でつくる2019年版 Nuxt.js TypeScript 開発環
【Nuxt.js】Nuxt文法編：$emit | aLiz Nuxt
書き方 @clickとセットで使用します🌟 書き方は2種類 メソッド記法 @click="methods名" this.$emit('イベント名', 第二引数) インライン記法 @click="$emit('イベント名', 第二引数)" 簡単な使い方 buttonを押すとalertが出ます⏰ 子のbuttonを親で検知し、 親でalertの出るmethodsを発火させます。 メソッド記法ver. 解説 $emit('welcome') 子のイベント@clickを 親に検知してもらうための$emit イベント名をwelcomeと名付けています。 @welcome 親で先ほどのイベントwelcomeを受け取って sayHiメソッドを発火させています💡 コード ) components methods内で$emitを 使用する場合はthisが必要です💡
Nuxt.jsのbundleサイズを55%削減したwebpack周りの小技 - Qiita
// import _ from 'lodash' import escape from 'lodash/escape' export default function (string) { // ... return escape(string) } これでbundleされるのはescape関数のみとなります。lodashはgzippedのものでも25kbほどあるため、きちんと気をつけておきましょう。 2. Vuetifyのa-la-carte（110kb→20kb） VueのマテリアルUIフレームワークといえばVuetify.jsが人気でわたしもお世話になっています。 しかしそのままVue.use(Vuetify)のようにしてしまうと、Vuetifyの全てのコンポーネントなどがbundleされてしまいます。 そこでa-la-carte（フランス語で、メニューから選んだ/お好みの料理の、
Nuxt.jsのVuexはStateがユーザー間で共有される恐れがあるので注意が必要｜niba1122
一発目からややネガティブな記事で申し訳ないですが、ここ最近で一番衝撃だったので書きます。公式ドキュメントにも注意書きがあるので、ちゃんと読めと言われればそれで終わりなのですが、僕と同じように見落としている人がいないとも限らないので。 タイトルの通りなのですが、Nuxt.jsのVuexはStateがユーザー間で共有される恐れがあります。現在業務でECサイトを作っていますが、他人のページにアクセスなんて出来てしまったら、障害どころの騒ぎではありません。購入履歴が丸見えなのはもちろん、下手したら他人のアカウントで購入し放題です。しかし、Nuxt.jsでは一見普通の書き方でこれが発生します。早速、Nuxt.jsでVuexのstateを初期化してみましょう。 // store/state/index.js export const state = { hoge: '', fuga: 0 }一見何の変
Nuxt.jsのSSR/CSR処理について
はじめに Nuxt.js の SSR/CSR の処理がどう動いているか（ライフサイクル）、また、安全な処理を書くにはどうしたらいいのか、いまいち分かっていない方や曖昧な方も多いと思います。 今回の記事では、Nuxt.js での開発における SSR/CSR 処理とセキュアなデータの取り扱いについて少し書きます。 ライフサイクルを理解し、Nuxt.js でどのように情報を扱うべきか検討しやすくなります。 AWS や GCP、Firebase、Azure など、クラウドサービスと連携するにあたりセキュアな情報の取り扱いで悩むことが出てくると思います。 AWS でいうと AppSync や API Gateway、S3 などの各種サービスに接続するための認証情報をどのようにフロントエンドで安全に扱うか、という点は気になるポイントだと思います。 この記事は直接ある特定のサービスへの接続方法のソリュー
Nuxt.jsのAuth認証の設定(バックエンド設定含む) | アールエフェクト
本文書ではNuxt.jsのモジュールnuxtjs/authを使い、Tokenを利用したJWT(JSON WEB TOKEN)のAuth(認証)の設定を行っています。Nuxt.jsでJWTの認証を行うためにはバックエンドが必要になります。バックエンドにはNodeのExpress.jsを使って構築します。本文書を読むことでNuxt.js環境下でTokenを利用したユーザ認証の設定手順の流れを理解することができます。 Tokenを使った認証の設定が行えることを本書の目的としているため入力フォームのデザイン、バリデーションやセキュリティについての説明は行っていません。特にセキュリティについてはJWTの設定方法がわかった後にしっかりと勉強してください。 Express.jsを使ったバックエンドの設定については一緒に記述すると文書が長くなるためまたフロントエンドにNuxt.jsを利用した場合のみ利用で
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
DruxtJS - The Fully Decoupled Drupal Framework
Introduction
【Nuxt.js】Nuxt文法編：try/catch | aLiz Nuxt
GitHub - nuxt-modules/i18n: I18n module for Nuxt
Internationalization for Nuxt Applications · @nuxtjs/i18n
nuxt-i18nでtemplate以外でtメソッドを使う - Qiita
aLiz Nuxt
Nuxt Modules
