ちゃんと理解できていなかった、「APIを使ってデータ取得する」ことについてまとめました。 APIからデータを取ってきて何かアプリを作ってみたいという方や、 Nuxt.jsでのデータ取得についても書いているので、Nuxt.jsを勉強している方にも読んでもらえると嬉しいです。 今回作成したもの 住所入力フォームでよくある、 郵便番号を入力してボタンを押したら自動で住所を入力してくれるプログラムです。 郵便番号検索APIは登録不要ですぐに使えます。 前提 ・Node.jsはインストール済（バージョンは現時点でv10.13.0） ・Vue.js/Nuxt.jsはある程度理解している （私はVue.js & Nuxt.js超入門で勉強していました。また、こちらの記事も参考にしていただければと思います。） 作成の手順 Nuxt.jsのプロジェクトを作成する templateを作成する 特定の郵便番号の
Docker multi stage build on Nuxt.js Application #nuxtmeetup
2019/8/26に行われたNuxtMeetUpでの登壇資料です。
Nuxt マイクロサービスを 3つに分割した話 / Split A Nuxt Microservice to 3 Microservices
NuxtMeetUp#9 オールスターズ https://nuxt-meetup.connpass.com/event/135514 #nuxtmeetup
Unification of the middle scale services by Nuxt.js
2019/05/08(水)に開催された『【シューマイ】Tech Lead Engineerから最新技術を学べ！Laravel編』の資料です。 https://shuuu-mai.connpass.com/event/127158/ 概要: 新卒向け逆求人就活サービス『キミスカ』の事例をもとに、Laravelのアーキテクチャ、インフラ構成、デプロイフロー、ログ監視体制についてご紹介をしたいと思います。
ユニットテストの書き方メモ。 サンプルコードのテストランナーはJestです。 jest.config.js ルートにおいとけばとりあえず動くと思うコンフィグ。 testEnviromentはjest-environment-jsdom-global、 アセットのスタブにjest-transform-stubを利用する。 const path = require('path'); module.exports = { verbose: false, // 実行中に各テストを報告するかどうか testPathIgnorePatterns: [ '/node_modules/' ], moduleFileExtensions: ['json', 'js', 'vue'], transform: { '^.+\\.js$': 'babel-jest', '.*\\.(vue)$': 'vue-je
![[Vue/Nuxt] Vue Test Utils の コードスニペット集](https://cdn-ak-scissors.b.st-hatena.com/image/square/8d71ff5111e05619a10d29bb40d7aebaa75c8fbc/height=288;version=1;width=512/https%3A%2F%2Fs0.wp.com%2Fi%2Fblank.jpg)
はじめに こんにちは、がんがんです。 2024.02.29 に関西で行われたReboot v-kansai Meetup #15で LT 登壇をしてきました。 登壇内容が GitHub の実装を掘っていくものだったため、本記事で改めて整理できたらと思います。 スライド資料はこちらです Auto-imports の使い方はこちらです Auto-imports 機能とは Auto-imports 機能とはcomponents、composablesを import 文不要で利用できる Nuxt の機能です。components の Auto-imports 機能はNuxt2時代からあったものです。 Nuxt3 の Auto-imports は以下の 2 機能を有しています。 機能 1. Built-in Auto-imports Vue, Nuxt composable が import 不要
Nuxt.jsのプロジェクトを初期化するまず作ったリポジトリからgit cloneしてこよう。 https://ja.nuxtjs.org/guide/installation を参考に初期化コマンドを実行する。 Project name と Project description は適当に書こう。 Firebase上に配置するのでUse a custom server frameworkはnoneで良いと思われる。 Use a custom UI framework は好みで選べば良い。私はUI frameworkは使用しないのでnoneを選択する。 Choose rendering mode は Firebase Hosting に単に配置するだけであれば Single Page App で良いと思われる。 Use axios module は分からんけどもこだわりなければ、とりあえず
JSer.info #402 - Reactを使った静的サイトジェネレータであるGatsby 2.0.0がリリースされました。 Announcing Gatsby 2.0.0 🎉🎉🎉 | GatsbyJS Runtimeのサイズを削減、React 16、webpack 4、Babel 7に対応。 アクセシビリティの改善のためにreact-routerから@reach/routerに変更。 Investigate using Reach Router · Issue #5656 · gatsbyjs/gatsby layoutコンポーネントをgatsby-plugin-layoutへ移動するといった変更も行われています。 Nuxt.js 2.0(Vueベース)とNext.js 7(Reactベース)がそれぞれリリースされています。 Nuxt.js: Release v2.0.0 · n
Nuxt.jsでVuetifyを使う(with vue-property-decorator) | DevelopersIO
スクラッチでNuxt.jsをTypeScriptを利用して開発する環境に対して、Vuetifyを使う環境作成の手順を確認したかったので、方法を調べつつ実際に作成してみました。 前回作成した記事（「Nuxt.jsでTypeScriptを使う(with vue-property-decorator)」）で作成した環境に対して、Vuetifyを使う環境にするための方法についてまとめています。 前回と同様に、できる限りミニマムな構成で作成したいのと、自分的には理解のブラックボックス化が進みやすいため可能な限りVue CLIやcreate-nuxt-appは使用したくなかったため使用していません。（より簡単に早く、動くものを作りたい場合にはVue CLIやcreate-nuxt-appの利用をおすすめします。） はじめに 「Nuxt.jsでTypeScriptを使う(with vue-propert
2019年1月30日、株式会社Re:Buildが主催するイベント「【Nuxt.js/Vue.js】スタートアップ企業導入事例」が開催されました。近年注目を集めるNuxt.jsやVue.jsを実際の開発現場でどのように活用しているのか、スタートアップ4社が集い、自社の取り組みを語ります。プレゼンテーション「Nuxtjsでプロダクトを開発して得た知見」に登壇したのは、株式会社ITプロパートナーズの米川桂氏。講演資料はこちら Nuxtjsでプロダクトを開発して得た知見 米川桂氏：はじめまして。株式会社ITプロパートナーズの米川と申します。本日はNuxt.jsを使ってプロダクト開発して得た知見等を発表していきたいと思っています。 今日のアジェンダなんですが、簡単に自己紹介したあと、Nuxt.jsを導入したことによるメリット・デメリット、あとはNuxt.jsを作って工夫した点やまとめ等を発表していき
概要 こんにちは、アジアクエスト株式会社でフロントエンドエンジニアをやってます、かめぽんです。Nuxt advent calendarということで、今やもっとも勢いのあるFWのVuejsですが、Nuxt.jsもかなりのインパクトを与えているので、それについて思いの丈を伝えられればと思います。 そのインパクトはエンジニアリングはもちろんですが、組織レベルでも影響を与えているんじゃ無いかと僕は考えています。そこで、今回社内でフロントエンド組織を構築していくにあたり実験的にVue、Nuxtを導入するまで、Nuxtが組織にどんな良い影響を与えて、、、もっと大きく話をすると良い技術が組織に与えるインパクトはどんなものかをNuxtの事例を踏まえながら、書いていければいいなと思っています。（本記事の内容はNuxt meetup#5で話した内容を元に構成しています。） ターゲット エンジニアリングだけでな
Vue.jsの基本記法をおさらいしつつ、Nuxt 3ならではの「useAsyncData」「useFetch」機能を試してみよう
本連載では、Webページのユーザーインタフェース（UI）構築に「Vue 3」を利用したフレームワーク「Nuxt 3」の活用方法を紹介します。前回は、Nuxt 3の概要、Nuxt 3プロジェクトの生成・実行、Nuxt 2のプロジェクトでNuxt 3の機能を利用するNuxt Bridgeを紹介しました。今回は、Vue.jsの基本記法を簡単に確認した後、Nuxt 3で利用できる「useAsyncData」「useFetch」機能を紹介します。 はじめに Nuxt.jsは、Webページのユーザーインタフェース（UI）を構築できるVue.jsとともに、様々な追加機能をまとめて提供するフレームワークです。現在次期バージョン「Nuxt 3」が開発中で、2022年4月にリリース候補（RC）版がリリースされました。 前回は導入編として、Nuxt 3の概要を説明するとともに、Nuxt 3プロジェクトを生成・実
これはVue.js #3 Advent Calendar 2017 – Qiita 7日目の記事です。 今回、業務システムをNuxt.jsで実装しました。 使っていて、layoutが以外と便利だなと感じたのであーだこー書ければなと Nuxt.js Nuxt.jsの便利なところはめんどくさい設定をしといてくれています。 vue-router vuex middleware サーバーサイドレンダリングなど 今回業務システムなのでサーバーサイドレンダリングをする必要はなかったのでspamodeで開発していました。 nuxt.conf.js
最近のJavaScriptのフレームワークを勉強したての人の場合、Vue.jsなどはすぐ理解できても、Fluxの概念やVuexのStore等でわからなくなってしまうことはありませんか？ そういう場合、Nuxt.jsを触りつつNuxt.jsのマニュアルを見ると非常に簡潔で理解しやすいです。 具体的には下記のページです。ここを参考にしながら説明していきます。先にリンクの説明を見たい場合は「モジュールモード」の方を見るとより分かりやすいと思います。当記事の内容もそちらをベースに進めていきます。 Vuex ストア - Nuxt.js そもそも何に使うものなのか？ Storeはアプリケーション全体の状態を管理してくれるものです。具体的にはログインしているユーザーの情報などが一番わかり易いと思います。 具体的にどうやって使うのか Nuxt.jsの場合、まず store/index.js に状態の定義を
はじめに Nuxt.js（とVue.js）を使ってサイトを作る、を学習しました。 Nuxt.js初心者が、インストールからビルド、サーバーにアップするまでにしたこととその流れをまとめます。 前提 作業環境 PC：Mac（macOS Sierra） エディタ：Atom 前提知識 Vue.js -> ほぼ整備済のVue.jsプロジェクトを触った程度 Wordpress -> サイトを作る一通りの知識がある 今回使用したツールのバージョン Node.js -> 9.3.0 npm -> 5.6.0 Yarn -> 1.3.2 VCCW -> 3 Vue.js -> 2 Nuxt.js -> 1.0.0-rc11（学習の間にver.1.0.0が出ました🎉） aws-cli -> 1.14.22 vue-cli -> 2.9.2 作業前に導入済のツール Node.js npm Yarn Virtu
はじめに Sentry は OSS のエラー検知プラットフォームです．様々な言語に対応した SDK が用意されており，例えば JavaScript モジュールを使うとブラウザ上で発生したエラーや Node 上のエラー通知が可能になります． SPA でフロントエンドでの責務が多くなってきた昨今，エラーの検知は課題になりがちです．ユーザーの申告でしか気づけなかったバグや，特定のブラウザ・デバイスでしか発生しないエラーに気づけるようになります． Nuxt.js アプリケーションと Sentry を組み合わせた本番運用で，考慮が必要になった Nuxt.js モジュールと環境変数の扱いに関して紹介したいと思います． TL;DR; 本番環境のエラー検知のため Sentry を使うときの DSN 管理に困った DSN をサーバの環境変数として設定し，クライアント側には動的に渡したい nuxt-env は
JSer.info #697 - Nuxt 2は2024年6月30日でEnd-of-Life (EOL)となることが発表されました。 Nuxt 2 End-of-Life (EOL) · Nuxt Blog Nuxt 2.xの最終版となる2.18.0が6月末にリリースされる予定となっていて、それ以降はセキュリティアップデートも公式には提供されなくなります。 TypeScript 5.5がリリースされました。 Announcing TypeScript 5.5 - TypeScript TypeScript 5.5では、関数からtype predicatesを推論できるようになり、Array.prototype.filterなどでの絞り込みが簡潔に書けるようになっています。 また、Stage 3のSet Methodsをサポート、JSDocで@import {foo} from "foo"を
Nuxt.jsとmicroCMSで採用ページを作成してみよう！
はじめにこんにちはかみむらです。この記事はNuxt.js + microCMSで採用ページを作成するチュートリアルです。 microCMSの最大の特徴は、APIを部分的に扱えることです。なので、さまざまなユースケースが考えられます。例えば、企業のWEBサイトを作成すると仮定してください。CMSで管理する機能は、お知らせやブログが挙げられます。しかし、運用していくと採用情報やヘルプページなど、CMSで管理したい項目が増える可能性があります。 そこで、ヘッドレスCMSを使えば、フロントエンドとAPIを分離して部分的にCMS化することができます。なので、設計を一から見直すことなく、部分的な変更が可能になります。無理な工数を割くことなく、拡張性の高いWEBサイトを構築することができます。 今回は上記で上げた例の一つ、採用ページをNuxt.js + microCMSを使って実装していきます。 最終的
本連載では、Webページのユーザーインタフェース（UI）フレームワーク「Vue.js」と、Vue.jsを利用してWebページを作成できるフレームワーク「Nuxt.js」の活用方法を、サンプルとともに紹介します。前回は、Webページの状態を集中管理するVuexストアを説明しました。今回は、ページの表示前にネットワークからデータを取得して、ページやVuexストアに反映できる、Nuxt.jsの非同期データ機能について説明していきます。 はじめに Nuxt.jsは、Webページのユーザーインタフェース（UI）フレームワークであるVue.jsに、Webページの作成に必要なUI以外の追加機能をまとめて提供するフレームワークです。 Vue.jsのコンポーネントは、dataメソッドに定義されたデータを画面に表示しますが、Nuxt.jsでは、Webページの表示前にコンポーネントのデータをネットワークから取得
Nuxt.jsでログインをどうやるか、そしてCookieからlocalStorageへ - DJ lemon-Sour's diary (prod.hisasann)
🦑 まえがき Nuxt.js でいわゆる basic なログインの仕組み （ユーザーID・パスワードを入れる系）を作ろうとすると、なかなか大変で、これは Cookie が SSR 時と CSR 時に API サーバーまで勝手に送信するしないの話などあり、結構気にする箇所は多くなります。 Cookie を使ったパターン では、 Cookie はあくまでも Nuxt.js 側のみで使用し、 BFF との通信は、リクエストヘッダーにログイントークンをのせて送信しています。 また、ログイン処理後はレスポンスヘッダーからログイントークンをもらい、それを Cookie に保存します。 それについての考察は以下にまとめております。 Nuxt.jsを使ったログイン周りの仕組みについて · hisasann/typescript-nuxtjs-boilerplate Wiki また、 OAuth 版ではあ
Firebaseで業務アプリケーションを構築しよう 1:Nuxt.jsのセットアップ - takeda_san’s blog
目的 Firebaseを使って業務アプリケーションを作りたい。 背景 普段はAWSのECSでフロント/バックエンドのサーバを立てて業務アプリケーションを稼働させています。 ですが、利用者も限られてるしフロントエンドサーバに至ってはコンテンツの配信を一日に数回するだけなので、なんか過剰なことをやっている気もする。 FirebaseのCloud Functionとhostingで代用できるかも…？ バックエンドにしたって、簡単なRESTのIFとRDBへの型変換をやっているだけな気がする。 バリデーションをフロントエンド側でやればもしかしたらFirebaseのCloudStoreで代用できるかも…？ ということで、Firebaseを使って業務アプリケーションを作ってみようというのが今回の目的。 やること FirebaseのCloudStore/Functions/Hostingを使う Nuxt.
【Nuxt.js】Vue.jsをより効果的に使えるフレームワークのメリットや利用シーンを紹介！｜Udemy メディア
システム開発 2019/09/20 【Nuxt.js】Vue.jsをより効果的に使えるフレームワークのメリットや利用シーンを紹介！ Nuxt.jsとは、Webアプリ開発の機能が最初から組み込まれているVue.jsベースのJavaScriptフレームワークです。2017年以降、爆発的に普及しています。今回は、Nuxt.jsのメリットや利用シーンについてお伝えします。 Nuxt.jsとは？ Nuxt.jsとは、Vue.jsベースのJavaScriptのフレームワークで、「ナクスト」と読みます。React.jsベースのサーバーサイドレンダリング(以下SSR)用フレームワークであるNext.jsに触発されて作られました。 UIなどフロントエンド向けのフレームワークであるVue.jsに対し、UI以外の部分でWebアプリケーション開発に必要な機能が最初から組み込まれています。 Nuxt.jsは、ホテル
OpenAI API のサンプルWebアプリを Next.js から Nuxt 3 + TypeScript に1時間足らずで作り変えた話
ふと OpenAI の GPT-3 による自然言語処理を体験してみたくなり、アカウントを作成したのが今日の13:30 その2時間後には OpenAI のサンプルアプリを Next.js から Nuxt 3 + TypeScript に書き換えてました。 思いつきで OpenAI を試してみたくなり、チュートリアルを読んだら触ってみたくなり、Next.js のソースコードを見たら Nuxt 3 にしたくなりました。 それでもしばらく Open AI を試していたのですが、なぜか気づいたら Nuxt 3 化し始め、あっさりできたのでしばらく疎かにしてた Zenn の記事を書こうと思い立ったのが今（16:00） なぜ Nuxt 3 で作りたくなったのか Nuxt 3 になって <script setup> は使えるし useFetch() で簡潔にAPIを扱えるし、APIルーティングも使えるし、
v3.10 comes quite close on the heels of v3.9, but it's packed with features and fixes. Here are a few highlights. ✨ Experimental shared asyncData when prerenderingWhen prerendering routes, we can end up refetching the same data over and over again. In Nuxt 2 it was possible to create a 'payload' which could be fetched once and then accessed in every page (and this is of course possible to do manua
Vue.jsフレームワーク”Nuxt”を用いたリアルタイムチャット開発！チャット機能を通してリアルタイムなデータのやり取りや、Vuexでのチャットデータの管理について学ぶ。さらに、Firebaseを使ったデプロイなどサーバーレスアプリケーション開発に必要なスキルも学ぶ。
以前からVueには興味があって、このサイトもまあVuePress使っているから、まあそうなんだろうねという感じなんですけど、最近では職場でもVueが使われることが少しずつ増え始めて、今やっているプロジェクトではNuxt.js使うことになったのですよね。 そんな中で、認証基盤(別ドメイン)へのリダイレクトをかけようとしたら、リダイレクトをトリガしているページが一瞬表示されてからリダイレクトが完了する、というなんとも引っかかる動きをしたわけです。今回はこれについて検証して、現行(Nuxt.js 1.4.0時点)では、まずまず妥当と思われる対処法までたどり着いたのでこれを書きます。 要件 NodeJS 9.5.0 Nuxt.js 1.4.0 SPA モード 検証コードをリポジトリにまとめてあるので、詳細についてはこちらのpackage.jsonを参考に。 https://github.com/y
Nuxt で Vue 3.0 (Composition-API) を使いたいとき - ハードルを下げ続けるブログ@task
ja.nuxtjs.org composition-api.nuxtjs.org Vue3.0 がリリースされてからしばらく立ちましたが、Nuxt において Vue3.0 がサポートされた v3.0 がリリースされるのはもうちょっとかかりそうです。 とはいえ、v3.0 がリリースされるのを待って、無理やりバージョンをあげようとしてもおそらく、かなりの痛みを伴うことが、他の皆様のVue3.0移行記事からも読み取れます。 そこで、Vue 3.0 リリースより少し前から、既存の Nuxt Project に composition-API を導入した所感と、導入方法を記録しておきます。 というか、この過渡期においてNuxtへの Composition-API 導入についての日本語記事があまり見当たらなかったので、少しでも参考になれば幸いです。 なお、バージョンは記事公開時点の最新とします。 Nu
JSer.info #685 - Storybook 8.0がリリースされました。 Storybook 8 Storybook: UI component explorer for frontend developers 破壊的な変更として、storiesOf APIの削除、*.stories.mdxの削除、StoryShots addonの削除、Yarn v1のサポート終了などが行われています。 詳細はマイグレーションガイドを参照してください。 Migration guide for Storybook 8.0 • Storybook docs 機能追加として、Chromaticとの連携機能の実装、MSWを使ったReact Server Component(RSC)のサポート。 そのほかには、SWCを使うことでビルドパフォーマンスの改善、react-docgenがデフォルトとなるように変
この記事について 下記のもくもく会でやりました。 【初心者・1人参加歓迎】ITプロラボ_Laravel / Vue.js もくもく会(Web系)#3 - connpass 普段は PHP でバックエンドのコードを書くことが多いですが、ここ １ 年くらいで急激にフロントエンド書く機会が増えてきているので、Vue.js + Vuex （ついでに最近注目されている Nuxt も） でなんかつくってみよう、という、いわゆるやってみた系の記事です。 概要 定番の TODO リストをつくります。 フロントエンドに Nuxt.js 、バックエンドに Laravel を使います。 環境 nuxt を入れると、vue, vuex の他、開発に必要なモジュールをまるっと入れてくれるので、後述する vue init をした後、 yarn install すれば、すぐに開発をスタートすることができます。 nuxt
Nuxt.js で Vuex を使う 目次 Nuxt.js で Vuex を使う 目次 Vuex とはなにか Flux Fluxの要素 Dispatcher Store Action View Vuex Vuex のデータフロー Vuex Store の機能 Action Mutation State Getter Vuex機能の処理の流れ Nuxt.js で Vuex を利用する 今回作るアプリ Store ファイルの作成 stateの実装 mutationの実装 actionの実装 getterの実装 Viewの実装 感想 参考 Nuxt.js で Vuex を使ってみたので使い方、Vuexとはなにか、自分なりに理解したことをまとめます。 Vuex とはなにか Vuex は Vue.js アプリケーションのための 状態管理パターン + ライブラリです。 これが Vuex の背景にある基
こんにちは、現在フリーのマークアップエンジニアとして活動しているしょーごと申します。 最近はYouTubeなどでも発信しています。 普段はWordPress構築や静的サイトコーディングをメインとしているのですが、 最近機会に恵まれまして、Nuxt.jsのマークアップ部分（ロジック以外）を担当しております。 結果的に大苦戦してベテランの方に大迷惑をかけてしまったので、 マークアップエンジニアやデザイナーがNuxt.jsのマークアップ部分をアサインされた場合に必要な知識をまとめました。 Nuxt.jsはweb制作業界にも少しづつ浸透してきているので、マークアップエンジニアやデザイナーさんもいずれ触る期間があるかもしれない点で、同業の方々に参考にして頂けたらと思います。 俺の屍を超えていけ Nuxtってなんなの？ Vue.js単体では開発に不足している機能が多いです。なので従来はプラグインやライ
Nuxt.jsを使うと、比較的簡単にPWA対応のサイトを作ることができます。 ただ、PWA対応と一言で言っても、PWAが指す機能は様々なものがあります。 オフラインキャッシュ ホームスクリーン追加 プッシュ通知 カメラ 決済機能 etc iOSではAndroidと比べてPWAの対応が遅く、キャッシュ以外はあまり使うことがなかったのですが、 最近iPhoneからPixel4に機種変更したこともあり、手元の環境で色々とPWAを試すことができるようになったので、 色々実装して遊んでみました。 今回は、比較的簡単に実装ができる、 オフラインキャッシュ ホームスクリーン追加 プッシュ通知 をNuxt.jsとPush7というサービスを使って、実装してみたいと思います。 なお、今回作成したサンプルは以下のURLにアップしています。 https://nuxtpwa.netlify.com/ https:/
2019年7月31日、Vue.jsに関する知見を共有する勉強会「Roppongi.vue #2」が開催されました。Vue.jsをさまざまな角度から掘り下げるライトニングトークには4人が登場。「nuxt-mqのGooglebot検証 」に登壇したのは、@inosy22氏です。登壇資料はこちら nuxt-mqのGooglebot検証 inosy22氏：よろしくお願いします。私からは、Googlebotからのnuxt-mqというライブラリの見え方の検証という話をさせていただきたいと思います。 まず最初に自己紹介なんですけど、猪野と申します。「inosy22」というアカウントでいつも活動してます。 GameWithでサーバサイドエンジニアとして働かせていただいています。サーバサイドエンジニアなんですけど、VueやReactのようなフロントや、インフラ構築などもやっています。 本日の概要について、N
firestoreでlikeやfollowする際のデータ構成 / firebaseとNuxtでwebサービスつくったのでそのfirebaseまわり - Qiita
firestoreでlikeやfollowする際のデータ構成 / firebaseとNuxtでwebサービスつくったのでそのfirebaseまわりJavaScriptVue.jsFirebaseNuxt 趣味制作で、これ最高なんすよ〜といったランキングを作れるサービス、COUCH(カウチ)をリリースしました。Nuxtとfirebaseを一通り使用しています。 先週Nuxt系の記事を書いたので、 Nuxt.js Advent Calendar 2018 5日目 NuxtのOGP対応について / firebaseとNuxtでwebサービスつくったのでそのNuxtまわり 今回はfirebase周りの話になります。 参考文献 vue, nuxt, firebaseの公式docが手厚く、流行ってるのでみなさん良い記事書くしで、自分が書くことないんじゃないかと悩みます。 まあ、とりあえずは参考&勉強に
Nuxt.js + Netlify でform機能がまともに動かない - ECのウェブ担当者のメモ
Nuxt.js + Netlifyで無料サイトを作っていたら、 Netlifyのフォーム機能が正常に動きませんでした。 だいぶハマりました、、、、 その、解決策です。 Nuxt.js と Netlify はそれぞれ以下です。 Nuxt.js ja.nuxtjs.org Netlify www.netlify.com Netlifyのドキュメントを読むと ドキュメントはこちら https://www.netlify.com/docs/form-handling/ Netlifyのドキュメントに書いてある、formのサンプルは以下です。 <form name="contact" netlify-honeypot="bot-field" action="thank-you" netlify> <p class="hidden"> <label>Don’t fill this out: <inpu
Nuxt.jsチートシート - Qiita
関連: - Vue.jsチートシート(基礎編) - Vue.jsチートシート(コンポーネントと構成編) Vueチートシートに引き続き公式チュートリアルの抜粋です。 参照 Nuxt.js日本語公式 ガイド 概要 Nuxt.js = Vue.jsおよびそのプラグインに基づくサーバサイドフレームワーク NuxtはVue.js, vue-router, vuex, Vue Server Render, Vue Metaなどを包含する Vueと同じく部分的に利用することができる(Progressive Framework) 公式によると以下のような機能を提供している: Vue ファイルで記述できること（*.vue） コードを自動的に分割すること サーバーサイドレンダリング 非同期データをハンドリングするパワフルなルーティング 静的ファイルの配信 ES2015+ のトランスパイレーション JS と C
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.ログインできたら
トレンドのVuejs/NuxtをAws ECS, FargateでSSR、詳細解説します🚀 | Ragate ブログ
こんにちは！ ウェブアプリケーションの開発でデファクトスタンダードな VueJS / NuxtJS ですが、SSR 時のデプロイ方法についてはみなさん悩まれることが多いのではないでしょうか？ SPA であれば AWS Cloud Front と S3 のコンビで十分に運用可能ですが、要件に SSR が入ってくると Nodejs のランタイムが必要になりますね。 そんな時に大活躍するのが ECS, Fargate です！ 想定する読者 AWS サーバーレス環境で NuxtJS で SSR したいヒトNuxtJS のデプロイ方法について悩んでいるヒト はじめに Lambda での SSR 時の問題 実は、Lambda と API Gateway のコンビの方がもっと手軽にSSRを構築可能です。しかし、Lambda にはレスポンスボディサイズの制約、デプロイ可能な ZIP サイズの制約などがあり
[vue.js]Nuxt.jsでVuexを使ってみる #nuxtjs #vuejs - ジムには乗りたい
複数コンポーネントで状態管理をするのに便利らしいVuexを使ってみた。 Vuexストアに状態管理を任せて、各コンポーネントはストア経由で状態変更することで、状態変更を一元管理できるっぽい。 ja.nuxtjs.org ストアの作成 store/sample.js を作成する。 store配下にjsファイルを作ると、Nuxt.jsがVuexストアにしてくれる。 state 状態管理する要素の管理 mutations 状態の操作 actions 状態の操作する処理を呼び出し、反映（commit）する commitしない限り、反映されない 各コンポーネントからは、actionで定義した処理が呼ばれる。 // 状態管理したい要素に名前をつけて、stateとしてexportする export const state = () => ({ // 'hogeFromStore' という名前の状態を管理す
![[vue.js]Nuxt.jsでVuexを使ってみる #nuxtjs #vuejs - ジムには乗りたい](https://cdn-ak-scissors.b.st-hatena.com/image/square/9406b0899cd718df41f2f2455f6fbf69985bc98a/height=288;version=1;width=512/https%3A%2F%2Fogimage.blog.st-hatena.com%2F8454420450066794305%2F8599973812341920170%2F1517320817)
経緯 ReactのNext.jsが2系の時代にちょっと使ってみたもののCSSまわりが馴染めず（当時外部ファイルでグローバルCSSを管理したかった）だいぶ放置してしまっていたところ、Vue.jsのNuxt.jsで1系（RC版）が出ていることに気づいたので試してみることに。 せっかくなので、良さげなUIライブラリのElementも使ってみよう。 Nuxt.js？ サーバサイドレンダリングやルーティングが楽にできるVue.jsのライブラリ（と捉えている）。 ReactのNext.jsに対して、Vue.jsのNuxt.js。 ElementUI？ グリッドレイアウトからボタン・タブなどのUI、フォーム要素、ダイアログ、ツールチップ、ローディングまでいろいろ揃ってるVue.js向けUIライブラリ。 これがあればjQueryライクにVue.jsを使いながら、整ったレイアウトやUIを作り込めるのではない
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【Nuxt.js】郵便番号検索APIを使ってデータ取得を学ぶ - Qiita
[Vue/Nuxt] Vue Test Utils の コードスニペット集
Nuxt Auto-imports機能の深淵を求めて
Firebase + Nuxt.jsでプロジェクトをセットアップする手順書｜よねあぷ
2018-09-25のJS: Gatsby 2.0.0、Nuxt.js 2.0、Next.js 7、Idle Until Urgent - JSer.info
Nuxt.jsを用いたプロダクト開発を通して得た知見
組織構築としてのNuxt.jsの可能性について - Qiita
nuxt.jsのlayoutsがとても便利 - Qiita
VuexのStoreはNuxt.jsのマニュアルを見るとすぐ理解できる - Crieit
Nuxt.jsの学習（インストールからビルドまで） - Qiita
Sentry で Nuxt.js のエラー検知 + 環境変数の扱いに関する Tips - Qiita
2024-06-22のJS: Nuxt 2 EOL、TypeScript 5.5、State of JavaScript 2023の結果
ページ表示前にデータを取得して反映できる「Nuxt.js」の非同期データ機能を使いこなそう
Nuxt 3.10 · Nuxt Blog
Nuxt(Vue.js) × Firebaseでリアルタイムチャットアプリを作ってみよう！ | Techpit
NuxtをSPAモードで動かすとリダイレクト時に一瞬ページが見える | talk2wall
2024-03-19のJS: Storybook 8、Nuxt 3.11、Cloudflare Workers + Vitest
はじめての Nuxt.js + Vuex + axios - Qiita
Nuxt.js で Vuex を使う | mintsu's blog
マークアップエンジニアがNuxt.js案件で必須な知識【5選】 - Qiita
Nuxt.js＋Push7でPWAアプリとプッシュ通知を実装する - Qiita
Nuxt.jsのライブラリをGooglebotで検証してみる
Nuxt.jsとElementUIを組み合わせて使う - Qiita