Nuxt.jsでランディングページを作ってみました｜高橋悠太 / Yuta Takahashi｜note
共通アセットSCSS：/assets/scss/ に配置 画像：/assets/img/ に配置 // /nuxt.config.jsで読み込み css: [ { src: '~/assets/scss/common.scss', lang: 'scss' }, ], favicon、OGP画像：/static/img/に配置 // /nuxt.config.jsで読み込み meta: [ { hid: 'og:image', property: 'og:image', content: config.baseurl + '/img/ogp.png' }, ], link: [ // favicon読み込み { rel: 'icon', type: 'image/x-icon', href: config.baseurl + '/img/favicon.ico' }, // Google
AWS LambdaとNuxt.jsでServer Side Renderingする（2020年版） - Sweet Escape
サーバーレスでサーバーサイドレンダリング（SSR）の後編です。前編はこちら。 www.keisuke69.net なお、同内容をこちらのイベントでも話す予定ですので興味あるかたはぜひこちらも。 serverless-newworld.connpass.com はじめに サンプルアプリ serverless.yaml 最後に はじめに 前回、SSRとはって話を簡単にしました。今回はSSRをAWSのサーバーレス、つまりAWS Lambdaでやってみたいと思います。 今回はVue.jsのフレームワークであるNuxt.jsで作ったサンプルアプリのSSRをLambdaで試してみます。 前回のブログでNuxt.jsでの例という説明をしましたが、今回はそこを実際にやっていく感じです。 なお、Nuxt.jsをLambdaで動かす場合の話って実はググってもあまり出てきません。いくつかの記事が出てくるだけです
Nuxt.js + AWS Amplify でアプリ開発を始める｜べりめろ
AWS Amplifyとは？AWSが提供しているWeb・モバイルアプリケーションのフレームワークです。 https://aws.amazon.com/jp/amplify/ ざっくり言うと、簡単・最速・スケールするアプリケーションを構築できるフレームワークです。 近しいサービスで言うとFirebaseがあると思います。 サーバレスなのでオンデマンドで料金がかかります。個人開発で使う分にはほとんど料金が掛からないのでおすすめです。 今回はフロントエンドにNuxt.jsを使ってAmplifyを始めていきたいと思います。 ゴールNuxt.js + AWS Amplifyの開発環境構築 前提AWSアカウントは作成済みの前提で進めていきます 手順Nuxtプロジェクト作成 rendering modeはSPAにします。UIはいつもよく使っているVuetify.jsにしました。 $ yarn creat
【v2対応】Nuxt.jsとFirebaseを組み合わせて爆速でWebアプリケーションを構築する - Qiita
Firebase Advent Calendar 2017 21日目の記事です。 フリーランスでフロントエンドを中心にエンジニアをやっているpotato4dです。 普段はVue.jsを中心に、案件を進めたりコミュニティに関わったりしていますが、今回はそんなVue界隈で今アツいフレームワークであるNuxt.jsとFirebaseを組み合わせて、SPA + SSRにAuthと Firestore を組み合わせたアプリケーションを高速で作る方法を、サンプルとあわせてご紹介します。 2019/10/16 追記 このサンプルは Firestore が存在しない Nuxt v1.x + RTDB 時代のコードを愚直に移行している ので全体的に資料が古くなっています。 インフラ構成については順次更新していますが、特にデータストア操作周りについては できるだけ参考にしないでください。 2019/07/02
Nuxt.js + Firebase Authentication + FireStoreでwebアプリケーションハンズオン - Qiita
Nuxt.js + Firebase Authentication + FireStoreでwebアプリケーションハンズオンハンズオンFirebaseAuthFirestoreNuxt 本記事は以下に引っ越しました。 今後Qiita上での更新はありません。 この記事のターゲット Nuxt.js + Firebaseで何か作りたい Firebase AuthenticationとCloud FireStore使いたい Chapter1 firebaseの準備 まずはfirebase側を準備します。 今回用意するのは - プロジェクト - Authentication - FireStore の三つ。 firebase consoleにログイン 1.https://firebase.google.com/?hl=ja へアクセス 2.右上の「ログイン」ボタンからログイン。 3.ログインできたら
Nuxt.js(Vue.js)SSRのライフサイクルを完全に理解したい(wip) | miyazaki develop log
最近、Nuxt.jsで開発をする機会をいただいたもののnuxtのライフサイクルになかなかつまずいたのでまとめてみました。 fetchやmounted、createdなどはなんとなくわかったものの、middrewareやpluginsが混ざると本当によくわからなくなる。。 まだまだnuxt.js2ヶ月と超絶初心者で網羅できてないライフサイクル + 間違いもあるかと思いますので、随時更新予定です。 検証するライフサイクル SSR(サーバーサイドレンダリング)とCSR(クライアントサイドレンダリング)で頭がごちゃごちゃになるかと思いますので 別々で書いていきます。 SSRは、URLで直接アクセスされた際に、動くもの。 CSRは、nuxt.js上のアプリケーション上でリンククリックされた際にに動くもの。 として考えています。 検証コードは下記の通り。 念のため、全部に process.server
Nuxt/VuexでFirebase Authenticationを使ってユーザー認証機能を作る - フリーランチ食べたい
Nuxt/VuexでFirebase Authenticationを使ったユーザー認証機能を作るにあたって、基本的なやり方はFirebaseドキュメントに書いてあるのですが、「どこに何を書けばいいのか」がよくわからなかったので調べながらまとめてみました。 完成形 こんな感じで用意されたUIを使ってログイン機能が実装できます。 前提条件 Firebase Projectの作成/Firebase SDKの作成はNuxt/Vuexには関係しない部分なので次の記事を参考に行ってください。この記事はFirebase SDKをNuxt/Vuexにどう組み込むか、を中心に書きたいと思います。 firebase.google.com 環境 nuxt@2.5.1 vue@2.6.10 vuex@3.1.0 firebase@5.9.2 firebaseui@3.5.2 FirebaseUIインストール＆CS
Nuxt.jsのStoreによるデータ保存 [vuex-persistedstate][js-cookie]
Nuxt.jsにおいてStore（ストア）を利用すると、データの状態管理をおこなうVuexによってコンポーネント間のデータの受け渡しを一元化できます。本記事ではそのStoreとvuex-persistedstateモジュールを利用してデータをLocal Storage（もしくはSession Storage）に保存してみます。 Storeにはクラシックモードとモジュールモードがありますが、本記事ではモジュールモードによる記述で説明していきます。２つのモードの違いについては公式サイトを参照して下さい。 Nuxt.jsによるプロジェクトの作成は下記ページをご覧下さい。 Nuxt.js入門 [$route.params][layouts] プロジェクト内のディレクトリを確認します。Storeによる機能は、主に「store」ディレクトリ内にファイルを追加していくことで利用できます。 $ tree
Nuxtでredirectする方法 - Qiita
https://github.com/nuxt/nuxt.js/issues/1843 によると、設定ベースでやる方法はない。 A. 空のページを配置して、fetchでprogrammaticallyにrecirectさせる B. middlewareで似たようなことする A. 空のページを配置して、fetchでprogrammaticallyにrecirectさせる 例: /にアクセスすると/postsにリダイレクトさせたい場合 pages/ index.vue posts/ index.vue <script lang="ts"> import Vue from 'Vue' export default Vue.extend({ fetch({ redirect }) { redirect(301, '/posts') } }) </script>
【NuxtJS】Vuex で mapGetters 引数ありの書き方 - tomatoaiu の Tech Blog
やりたいこと Nuxt.js を利用時に、Vuex で mapGetters に引数を持たせる場合には、どのようにすればよいのか分からなかったので調べてメモしました。 やりたいこと 環境 環境構築 ディレクトリ コード store/hoge-module.js pages/index.vue 実行 解説 おまけ メソッドとして利用したい場合 参考 環境 Nuxt Vuex: モジュールモード Vuex には、クラシックモードとモジュールモードの2つのStore管理方法がありますが、この記事では、モジュールモードを取り扱います。 ※ NuxtJS のバージョン 2.12.X の以降だと、クラシックモードは 廃止予定になっているようです。 環境構築 Nuxt.js の環境構築です。create-nuxt-appを利用します。 npm i -g create-nuxt-app バージョンは、cr
Nuxt.js + Tailwind CSS で爆速コーポレートサイト作成
これから注目されること間違いなしの CSS フレームワークです。 Tailwind CSS では、UI コンポーネントを提供するのではなく、CSS の class を提供するだけなので、用意された class を指定するだけなので簡単に複雑な UI を作成することができます。 公式ドキュメントを元に Flex の例を見てみましょう。 class を見るだけで大体なにをしているかわかると思います。 Tailwind CSS を採用した理由僕は、割とフロントエンドには自信があります。デザインもかじってる系です。 UI フレームワークだとちょっといじろうと思うと逆にコストがかかるケースが多く、コンポーネント作成や見た目はこっちでやるから class だけ提供してくれとずっと考えており、そんな中 Tailwind CSS と出会ったので採用しました。 英語もできないので正直 class 名を考える
Nuxt + firebaseでサーバレスな図書管理デモアプリを3日で作成・デプロイした - Qiita
時間でいうと25hで設計・実装・デプロイまでできたのでメモとして残します 完成gif こんな感じで図書を管理する上で必要となるであろう各機能を実装しました。 URL載せていたのですがアクセス増えて怖くなったのでURLは消しました。。 執筆する中でバグをチラホラ見つけてしまいましたが、一旦書き切ります・・・ モバイルもホラ（レイアウトは考慮が必要） 経緯（動機） 弊社では業務で使用する図書を経費購入できる制度があることもあり、社内図書がかなり溜まってきていました。 図書の管理は、現状スプレッドシートで管理しており、これが特に破綻していると言うことはなかったのですが、モバイルから触りたいなぁという個人的な都合がありました。 そこで簡単な図書管理アプリケーションのデモを作ってみようと思い立ちました。 で、自分的に手応えがあったらこれでいきませんかと提案してみよう・・・ 技術選定 モバイルから触り
windows10 Electron-Nuxt.jsをインストールする
Nuxt.js ライブラリ「vue-sidebar-menu」をインストールしてサイドバーメニューを実装する 2020.07.05 ライブラリ「vue-sidebar-menu」をインストールすると、サイドバーメニューの実装が簡単に可能です。ここでは、nuxt.jsでvue-sid[…] Nuxt.js ライブラリ「vue-core-video-player」をインストールして軽量のビデオプレーヤーを実装する 2020.06.08 ライブラリ「vue-core-video-player」をインストールすると、軽量のビデオプレーヤーの実装が可能です。ここでは、nuxt.jsでvue[…] Nuxt.js vue-confirmation-buttonを使用してボタンクリック時に確認メッセージを表示する 2020.04.07 ライブラリ「vue-confirmation-button」をインス
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
FirebaseのStorageを使ってみる｜sumi｜note
Nuxt.js+VuexFire+Firebaseを使って掲示板を作ってみました｜高橋悠太 / Yuta Takahashi｜note
middleware プロパティ
『Nuxt + Firebase Hosting』で超速deploy - Qiita
Nuxt.js｜存在しないURLのリクエストがあった時の処理｜たのしいWeb
Nuxt.jsでメッセージの外出し＆国際化対応 - Qiita
Nuxt.jsとFirebaseでSPA×SSR×PWA×サーバーレスを実現する - DMM inside
