ポートフォリオサイトをVue.jsからNuxt.jsに書き換えてサーバーサイドレンダリングをする - Kekeの日記
本記事 本記事はVue.jsを使ってGoogle App Engineにホストしている静的なサイトをNuxt.jsを使って書き直そう思います。 題材は以前使った自分のポートフォリトサイトです。 keisukeyamashita.com GoogleCloudPlatform（GCP）で無料枠を使いきり画像などのコンテンツをCloud Storageに置いてありましたが、Embulkをマスターしたことによって簡単に二つ目のアカウントに移行できたので、再度ホストしようと思いました。 目的 今回の移行には、以下のような目的がありました。 コンポーネント設計が自由すぎる どこまでをどうコンポーネント分けするのかは、Vue.jsやReactを使っている人ならよくあると思います。 僕自身も、学生で、インターンといえばサーバーサイド、インフラ、モバイルアプリしか歩んでこなかったので、フロントエンドを知識
僕がNuxt.jsでアプリケーションを作るときに使用している技術 2020 Spring - ムニエルブログ
2020年4月現在、僕がNuxt.jsでアプリケーションを作るときによく使用している技術と、その選定理由や導入方法を紹介します。 目次 Vuetify.js HTML JavaScript Sass ESLint stylelint nuxt-i18n Netlify Vuetify.js Vuetify.jsは、マテリアルデザインに準拠したVue.js用のUIフレームワークです。 Vue.js用のUIフレームワークは他にもありますが、初めて使ったのがVuetify.jsだったこともあって愛用しています。 他の選択肢 Element Onsen UI など 選定理由 コンポーネントを一から作るのはつらいので、なんらかのUIフレームワークを使用したい コンポーネントの種類が豊富 コンポーネント名がイケてる（<v-btn>のようにv-が接頭辞になっている） 導入方法 以下の記事を参照してくださ
「SSRと規約だけ」の勘違いを解く、 Nuxt.js をプロジェクトで採用すべき理由 - ROXX開発者ブログ
back check 事業部に業務委託でコミットしているフロントエンドエンジニアの potato4d です。 ROXX では、 v1.0 が出る前から、プロダクト、コーポレートサイト、ランディングページ、メディアなど、多くのシーンにて、 Nuxt.js が採用されています。 Nuxt.js は多くの人に愛される一方で、最近は Vue 3.0 の話もあり、多少評価が落ち着いてきた印象があります。 この記事では、十分に普及した今だからこそ、 Nuxt.js の本当の優位性と、どういったときに使うべきか。あるいは使うべきでないかを再度言語化できればと思います。 「SSRとルールだけ」という勘違い まずは Nuxt.js の採用についてです。多くの場合、「Vue か Nuxt か」という問いには、いかが判断基準として使われます。 SSR 今必要かどうか Nuxt.js の組み込みのルールをチームに
inject と Headless Vue インスタンスを活用したリアクティブな認証管理 - ElevenBack LLC. Engineering
この記事は Nuxt.js アドベントカレンダー 24 日目の記事です。 ここ一年ほどほとんど Nuxt.js で Vue.js を単体で使うことがめっきり減った @potato4d です。 今回はニッチな話題として、「JavaScript の世界のオブジェクトに Vue.js のリアクティブ機構をもたせる」という話をしたいと思います。 なお、今回はややこしいコードベースを省く意味でも Nuxt.js 環境を前提とします。 実現したい要件 まずは実現したい要件を定義します。 今回は、現在弊社にて開発中の Web サービスのシステムをベースとして考案します。 Firebase Authentication を使ってユーザー情報をやりとりする データベースヘの取得・保存操作では、 Firebase 側のユーザーの uid を利用するためグローバルから認証情報にアクセスできてほしい できればその
Firebase と Nuxt.js で個人ブログを作った話 - Mobile Factory Tech Blog
こんにちは、 2018年モバイルファクトリーアドベントカレンダー 12/7担当の id:yunagi_n です。 はじめに 個人的な趣味で、 Firebase と Nuxt.js でブログを作っています。 そのことについて、いろいろ話します。 なお、会社で開発しているアプリ・プロジェクトとは一切関係ありません。 前提 以下の環境で開発、動作確認を行っています。 Firebase (Blaze プラン) Node.js 8.12.0 Windows Subsystem for Linux (WSL) Ubuntu 16.04 Nuxt.js 2.3.4 TypeScript 3.2.1 Firebase と Nuxt.js のプロジェクトは作成済み 本題のその前に なぜ nuxt generate で生成した静的ファイルを使わないのか、についてです。 あくまで個人的な思いなのですが、 記事を
Nuxt.js on AWS Lambda with Serverless Framework - mya-ake com
この記事についてこの記事はVue.js #2 Advent Calendar 2017 - Qiitaの 12 日目の記事です。 この記事では Nuxt.js（v2.6.2）を AWS Lambda で動かす方法について書いています。 Nuxt.js に関する説明もありますが、全体的にサーバー構築寄りの内容になっています。 しかし、Node.js で AWS にデプロイまでできる Serverless Framework というツールを利用しており、サンプルコード の npm scripts を実行するだけで AWS 上に環境を作れるようにしています。（AWS への登録と Credential の生成は必要です） ご興味のある方はそちらも参照してみてください。 また、先に断っておくとこの記事では API Gateway をエンドポイントとします。 API Gateway をエンドポイントす
真のフロントエンドエンジニアになるために、まずはNuxt.js + Firebaseを使って簡易メモ帳を作ってみた - LiBz Tech Blog
目次 目次 はじめに 前提条件 Nuxtってなに？ Nuxtの主な機能 Nuxt.jsやってみる Nuxt.jsのインストール Nuxt.jsでアプリ作成 nuxt.config.jsによる設定いろいろ Nuxtの構成 Nuxtでアプリ実行 ポート(3000の部分)を変更したい場合 アプリの説明/解説 レイアウト・コンポーネントの作成 レイアウト(layouts) ページ(pages) コンポーネント(components) データの扱い/保存 firebase firebaseでdatabase作成 firebaseで認証設定 store(Vuex) デバッグ ビルド herokuにデプロイ やってみて はじめに こんにちは! 11月にLiBに入社したアベと申します。 アラサー子持ちのエンジニア(エンジニアと名乗るのは憚れる...)です。 社会人3年目からWebの世界へ転身し、webデザ
あーありがち - NuxtデフォルトサーバはCache-Controlできないので注意
まとめNuxtは各種のサーバサイドフレームワークと組み合わせられるがNuxtだけでもサーバとして機能するデフォルトで ETag は吐くが Cache-Control は吐かないのでそのまま CDN に食わせるといつまでもリフレッシュされない この影響を受けるのはあくまで vue-router を経由する Page だけassets に関しては nuxt start で serve している場合は問答無用で max-age は 1 year になる1optional な http response header を追加する middleware はどうもなさげ 他のフレームワークと組み合わせてその middleware を使えば追加できる（Koa で確認済み）そもそもWebのcacheってprivate cache と public cache があるCDN は public cacheブラ
Nuxt.jsで作った静的サイトのビルド/テスト/デプロイを自動化して、毎朝10時に更新する。
AWSとCircleCIの力を借りて、Nuxt.jsで作った静的サイトの運用をできるかぎり自動化した話です。 3ヶ月ほど前からCIのサービスを使うようになり、入門記事はたくさんあって助かったのですが、具体的にどんな感じで使っているかの情報が少なかったので記事にしました。 もしかしたら、CIの使い方が間違っているかもしれないので、そのときは優しくコメントをいただけたら嬉しいです。 できあがった流れ 毎朝10時にLambdaを起こしてデータの更新を行い、静的ファイルを再生成してからデプロイする流れになっています。 対象のサイト ざっくりAWSという、AWSの料金を日本円でざっくり計算できるサイトです。 Nuxt.jsで作成したものを、静的サイトとして生成して、AWSのS3にホスティングしています。 計算に必要なAWSの価格や為替は、毎朝10時に取得したものをS3にJSONで保存し、そのJSON
Vue.jsとNuxt.jsを使っていて、どっちのドキュメントを見ればいいんだ？ってなったときのために機能を整理する。
Vue.jsとNuxt.jsを使っていて、どっちのドキュメントを見ればいいんだ？ってなったときのために機能を整理する。 開発に慣れてきたら迷うことはないと思いますが、Vue.jsをさわるのが初めてでNuxt.jsを採用した場合、どっちのドキュメントを見ればよいかわからずに、さまよってしまう事があるかもしれません（自分がそうでした）。そんなときのための、長ったらしいメモです。 この記事を書いている時点では、Vue.jsが2.5、Nuxt.jsが1.2です。 ドキュメントの歩き方 まずはガイドで概要を把握して、細かいことが気になったらAPIをあたります。 Vue.jsでの開発がはじめてであれば、本格的に書き始める前に、スタイルガイドを見ておくと、手戻りが少なくなるかもしれません。 ガイド フレームワークの使い方がわかりやすく書かれています。 はじめにから順に読んでいって、大体こんなことができる
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vue___Vuex_のアーキテクチャ完全に理解した.pdf
noteをNuxt.jsで再構築した話
Nuxt.js本格導入で遠回りしないためのTips
https://jp.nuxtjs.org/