お問い合わせフォーム ”ほぼ” 静的サイトで「よく出てくるけどできれば触りたくないWebサイトの機能」No.1（僕調べ） そのためだけにWor○Press。。？ 問い合わせを受信したらLINEへ通知 メンバーは非Web業界。LINE ＞ Slack LINE＠ は友だち登録のハードルを考慮し見送りたい ライブ情報とニュースはCMSで Netlify CMS なるものがある様子 （未実装）
Netlify + Nuxt.js 最高のDXの中のつまづきポイント
お問い合わせフォーム ”ほぼ” 静的サイトで「よく出てくるけどできれば触りたくないWebサイトの機能」No.1（僕調べ） そのためだけにWor○Press。。？ 問い合わせを受信したらLINEへ通知 メンバーは非Web業界。LINE ＞ Slack LINE＠ は友だち登録のハードルを考慮し見送りたい ライブ情報とニュースはCMSで Netlify CMS なるものがある様子 （未実装）
Nuxt.jsに飛びつく前に~Nuxt.jsを習得するための前提技術と、その勉強方法の紹介~ - Qiita
概要 Nuxt.jsは今最も「イケてる」とされるWEB開発フレームワークです。ポストRailsという文脈で語られることも多いようです。巷でNuxtについての記事も増えていますね。 しかし、ネット上のNuxtの記事では、Nuxtを始める上で前提となる前提知識の存在が省略されているように思います。Nuxt.jsはVue.jsの発展形(=Nuxtを触る人はVueの経験があるという前提）なので当然なのですが。 本記事では、これからWEB開発者を目指す人を対象に、 ・Nuxtを習得するには何が必要か？ ・そのための勉強方法 を紹介します。 解像度を高めた言い方をすると、**「Nuxtの公式ドキュメントを理解できる」「自分で簡単なNuxtのエラーや問題を解決できる」程度の実力を身に付けることで、「メンバーとしてチーム開発に参加できる」**をゴール設定に置きます。 自己紹介 NuxtとFirebaseを
【忘年会に向け】オールスター感謝祭的な四択クイズウェブシステムをNuxt.js+Socket.IOで実装してみた - Qiita
経緯 我がチームが忘年会の幹事に任命される まじろう「出し物、、、なんかします？」 先輩「オールスター感謝祭・・・」 一同「は？」 先輩「オールスター感謝祭！！」 ということで、即興でnuxtによる四択クイズウェブシステムを作ったお話です。 ソースはgithubに設置しました。 https://github.com/majirou/allstar また、開発にあたり以下の記事とソースを参考にさせていただきました。 オール◯ター感謝祭もどきアプリで社内イベントを乗り切る 私自身はVue派なので、Reactソースを眺めながら勉強になりました。 基盤となる技術 websocket Slackなどのチャット系サービスなどに使われている技術とのことで、 nodejsでは、socketioというライブラリを用います。 wiki からの引用ですが、メリットはありそうです。 従来の手法に比べると、新たなコ
Vue(Nuxt.js)でEnterで送信、Shift+Enterで改行の機能を実装する【textarea,input】 - Qiita
Vue(Nuxt.js)で、textarea・inputで入力したものをEnterで送信、Shift+Enterで改行する機能を実装する方法です。 チャット機能を実装する時などに便利かと思います。 Vue(Nuxt.js)でEnterで送信、Shift+Enterで改行の機能を実装 <template> <div> <p>送信:</p> <p>{{ sendMessage }}</p> <textarea v-model="message" @keydown.enter.exact="keyDownEnter" <!--enterをkeydownした時のイベント--> @keyup.enter.exact="keyUpEnter" <!--enterをkeyupした時のイベント--> @keydown.enter.shift="keyEnterShift" <!--enterとshiftを
概要 これからNuxt.jsで開発を始める方向けに、最初に抑えておきたいポイントを個人的にまとめます。私自身としてはAngularアプリの初期構築業務の経験があるのですが（数万行単位で書いてました）、自分が新チームの技術選定をするタイミングでNuxt.jsを選定しました。ある程度SPA開発の知識はありましたが、最初は各フレームワーク毎に結構抑えどころというか癖見たいのを感じました。そんな、親切で日本語な公式読んでもすぐには手の動かない並エンジニアの自分の様な方向けにまとまったチートシート的な感じになればいいなと思っています。 // 2020/11/26追記 記述内容を現状に合わせて見直しました。 本記事は全体像の把握を目的としており、記述内容の強化が簡便性を損なわない様、最初は読み飛ばしても問題ないと思われるトピックには ⚫️ アイコンをつけております。 Nuxt.jsとは Vueベースの
![[Nuxt.js入門] 全体像をざっくり掴むためのポイントまとめ - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/5f522a3ea0ba23b18b3ad160f6aed4b35129845f/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCTnV4dC5qcyVFNSU4NSVBNSVFOSU5NiU4MCU1RCUyMCVFNSU4NSVBOCVFNCVCRCU5MyVFNSU4MyU4RiVFMyU4MiU5MiVFMyU4MSU5NiVFMyU4MSVBMyVFMyU4MSU4RiVFMyU4MiU4QSVFNiU4RSVCNCVFMyU4MiU4MCVFMyU4MSU5RiVFMyU4MiU4MSVFMyU4MSVBRSVFMyU4MyU5RCVFMyU4MiVBNCVFMyU4MyVCMyVFMyU4MyU4OCVFMyU4MSVCRSVFMyU4MSVBOCVFMyU4MiU4MSZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9NzJkOWM2OGZlMmFkMGUwZDdlMWZkMGUxYzhkYTIwYTQ%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBoZWRyYWxsJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz0zM2Y4NGRiMGU3MTE4NDM2ZGQxMjAzYWNiMzE4YjYwMA%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D06cc8cacedc55bd2a4cb98196e7be23c)
Amplify + Nuxt.js + Cognitoでログイン機能を実装してみた - Qiita
今回の記事は、AWS amplifyの機能の一つであるAuthenticationについての記事です。 Nuxt.jsとAmazon Cognitoによるアプリケーションにユーザーのサインアップ、サインインなどの機能を追加し、実際にログイン画面を実装していきたいと思います。 環境 ・Pug を使用 ・コーディング規約は Nuxt.js に則って StandardJS ・Visual Studio Code ※amplify initによりプロジェクトが初期化されている前提のもと話を進めていきます。 Cognitoの準備 Cognitoを使用するためにAWSサービス機能のauthを追加しましょう
注意事項 Lambda@Edgeに無料利用枠は無いので注意 詳細な利用料金はこちら Serverless Nuxt 成果物はこちら→ serverless-nuxt 不具合修正、機能追加のプルリク待ってます！ あと付けてくれたらめっちゃ喜びます。 誰向け？ サーバー費用ケチりたいけど、ちゃんとしたサービス作りたい人 とりあえずNuxt/Vue使ってみたい人 環境構築めんどくせぇ！！誰かやってくれって人 何が良いの？ .envをちょろっと弄ってコマンド叩くだけで簡単デプロイ Nuxtやる時に大体使うModuleやらPluginやらが導入済み デプロイ時にS3に静的ファイルも自動でアップロード！！ 静的ファイルはCloudFrontを通して取得するから爆速！！ 導入済みModule/Plugin @nuxt/typescript-build @nuxt/typescript-runtime @
WordPressが嫌でNuxt.js+Contentfulでブログを作ったけどHugoに移行した話-前編 | JavaScriptに関するお知らせ
2019/09/17VueJavaScriptOthersWordPressが嫌でNuxt.js+Contentfulでブログを作ったけどHugoに移行した話-前編 こんにちは！今日は先日書いたブログをNuxt.jsとContentfulベースから Hugoベースに移行した理由について書きます。 まずはWordpressじゃ駄目だった理由 ブログと始めるにあたってまず思いついたのがwordpressです。 シェアも多分WPが圧倒的です。...が、WP使う気はなかったです。 個人的な理由は...↓ DB周り詳しくない WPはMySQL使います。といってもそんな難しくないんだけど、 SQLとかRDBMSにそこまで詳しくない人が触ってるとなんかのエラーが起きたときに対応できない気がするんだよなー 遅そう(MPA) MPAだとやっぱ再描画とかに時間かかりそう(多分) WPは特にDBを基に動的にレン
2019/12/18追記 12/12にBabelを取り除きTypeScriptのみでTypeScript 3.7の新機能に対応した@nuxt/typescript-build@0.5.1がリリースされました。 Babel削除に伴い、tsconfig.jsonのtargetをes2018に指定しないと、vue-loaderがOptional ChainingやNullish Coalescingを解析できなくなりました。 そのため、TypeScriptの時点でPolyfill込みのトランスパイルを行う必要があります。 SyntaxError: /path/to/project/component.vue: Support for the experimental syntax 'optionalChaining' isn't currently enabled (30:28): 29 | c
はじめに この記事は、全18回で連載したRails 6で認証認可入り掲示板APIを構築するのフロントエンド側を構築する記事連載となります。 前提として、Rails編で構築したバックエンドAPIが必要になるのでご注意ください。 （そのため、実質#19です） 目次 全６回、毎日更新です。 Nuxt.jsで認証認可入り掲示板APIのフロントエンド部分を構築する #1 環境構築 Nuxt.jsで認証認可入り掲示板APIのフロントエンド部分を構築する #2 NuxtとRailsとの疎通テスト Nuxt.jsで認証認可入り掲示板APIのフロントエンド部分を構築する #3 個別記事ページの作成 Nuxt.jsで認証認可入り掲示板APIのフロントエンド部分を構築する #4 サインアップページの作成 Nuxt.jsで認証認可入り掲示板APIのフロントエンド部分を構築する #5 ログイン・ログアウトの実装 N
Firestorage に画像ファイルをアップロードしたくなったのでやってみる。 やってることは一般的なファイルアップロードの流れと変わらないが、Firestorage にアップロードする処理は store の action として実装している。 まずは view に form を設置する。 @change イベントハンドラを設定する。 input(type="file", :multiple="false", accept="image/*", @change="detectFiles($event)") 次に methods にファイル選択時のイベントハンドラを定義する。 アップロードするファイル名は他と被らないように uuid ライブラリを使って動的に生成している。 ファイル名とファイル本体を取得したら store の uploadImage へ渡す。 import uuid fro
Docker AlpineベースのNode.js上で動くNuxt.jsにVuetifyを導入する - 独学プログラマ
このチャプターで達成すること チャプター「Nuxt.jsフロント開発事前準備」ではNuxt.jsのCSS環境を整えていきます。 具体的にはVuetifyの導入とカスタマイズ方法、Nuxt.jsメインCSSファイルの設定方法を解説します。 このチャプターを通してVuetifyとCSS周りの知識を深めましょう。 今回達成すること Docker環境のNuxt.jsにCSSフレームワークのVuetifyを導入します。 現状のDockerfileでは、Vuetifyのインストール時にエラーが出ます。 これはAlpineのNode.jsイメージに依存関係が存在しないために起こるエラーです。 この依存関係のインストール方法についても解説します。 ブランチを切っておく 作業に入る前にブランチを切っておきましょう。 root $ cd front front $ git checkout -b 202007
GitHub:nuxtjs-servermiddleware-api Nuxt.jsのserverMiddlewareを活用すると、Expressなどのサーバ用フレームワークを追加しなくても簡単に応答するサーバを立ち上げられます。 Nuxt.js環境で開発している場合には手軽でとても便利です。 モックアップのAPIを設置することで、このような効果が期待できます 新規サービスなど、既存のDBが無い開発もデータを入れた状態で行えるバックエンドにAPIを用意してもらえるまで手を止めなくてよい 設置方法 Nuxt.JS開発環境へ、このようなJavaScriptを設置します。 場所は、既存の pages middleware など予約されたディレクトリでなければどこでもOKです。 /api/sample.js export default function (req, res) { // req は
【Nuxt.js】Auth Moduleでログイン機能を実装する （ + Ruby on Rails・devise_token_authで認証を行う） - Qiita
【Nuxt.js】Auth Moduleでログイン機能を実装する （ + Ruby on Rails・devise_token_authで認証を行う）deviseauthenticationVuexNuxtdevise_token_auth この記事の目的 Nuxt.jsアプリのAuth Module使ってログイン機能を実装するための記事です。 また、記事の最後にはRuby on Railsのdevise_token_authを使ってトークンベースで認証する方法も記載しています。 前提 Nuxt.jsのアプリが用意されていること Nuxt.jsアプリとログインAPI用のエンドポイントはPOSTメソッド・/auth/sign_inとする ログインの流れ 【ユーザ】 Nuxtアプリのログイン画面でEメールとパスワードを入力し、「送信」ボタンを押す 【Nuxtアプリ】 パスワードとEメール情報を
Nuxt.js の Universal SSR を Azure App Service で運用する方法 - Qiita
この記事は Nuxt.js Advent Calendar 2019 の 17日目の記事です。 Nuxt.js（Universal SSR）のホスティング先にはいろいろあるが Nuxt.js の Universal SSR 構成では、SPA とは異なりホスト先として Node.js のサーバーが必要になります。でも、フロントエンドの開発をしている時にはできるだけインフラには関わりたくないものです。私はできれば、 PaaS/Serverless 環境にスマートにデプロイしたいと常に思っています。 Nuxt.jsの公式ドキュメントのFAQ でもデプロイに関する記事はほとんどが PaaS/Serverless を前提にしているようです。しかし、公式FAQ（ja版）には代表的な PaaS のひとつである Azure App Service の例がありません。en版にはかろうじて記事があるものの古い
NUXT.js×REST API×Typescript×SSR NUXT.jsはSSRの設定自体はmode: 'universal', とするだけでいいのですが、SSRとSPAで気を使って実装しないと、データの取得などで、どっちかでは動く、動かない問題が出てきます。 結構ハマったのでメモ。 問題 SSR時だけAPIレスポンスが取得できない。 SPA時はAPIレスポンスがちゃんと返ってきて問題ないのだが、 SSR時はリクエストはされているのに、APIレスポンスが返ってこないようなエラーが起こった。 原因 SSRする場合、asyncDataのライフサイクルでAPIのリクエストをする必要があると思います。 その時、proxyとかを使っているとSSR時のみAPI取得ができません。 nuxt-linkの遷移ならうまくいくのに、画面リロードしたらエラーでるみたいなケースです。 ※SSRのときはprox
（もっといい方法があれば教えて下さい！！🙇） 概要 Nuxt.jsプロジェクトで、外部ページに遷移してブラウザバックをしたところ、 画面最上部に戻されてしまったので対策。 結論 ホームディレクトリにapp/router.scrollBehavior.jsを追加し、下記のコードを実装 if (process.client) { if ('scrollRestoration' in window.history) { window.addEventListener('load', () => { window.history.scrollRestoration = 'auto' }) } } 理由 スクロール位置の復元設定が既存のrouter.scrollBehavior.jsで実装されているが、 iosだとbeforeunloadが発火しない。 なので、window.history.scr
はじめに ウェブストレージ便利ですよね、特にローカルストレージはCookieが使えないPWAや、DBを用意するほどでもないちょっとしたデータを保存したいときに使うことが多いのではないかと思います。 ただ、いざウェブストレージのデータを扱おうと実装を進めるとデータの同期や保存のタイミング等でつっかかることがままあります。 そこで今回はNuxt.jsでウェブストレージを簡単に扱う手法を考えましたので簡単にご紹介しようと思います。 実装方針 コンポーネントやページから直接ウェブストレージにアクセスしていると処理やデータが散乱してしまい辛い状況に陥りやすいです。 そこで、ウェブストレージの参照や処理は全てストアに一本化します。 各コンポーネントやページは共通のステートやアクションを参照することになりますのでデータが非常に扱いやすくなります。 実装 入力した値をウェブストレージに保存する簡単なデモを
ポートフォリオサイトをVue.jsからNuxt.jsに書き換えてサーバーサイドレンダリングをする - Kekeの日記
本記事 本記事はVue.jsを使ってGoogle App Engineにホストしている静的なサイトをNuxt.jsを使って書き直そう思います。 題材は以前使った自分のポートフォリトサイトです。 keisukeyamashita.com GoogleCloudPlatform（GCP）で無料枠を使いきり画像などのコンテンツをCloud Storageに置いてありましたが、Embulkをマスターしたことによって簡単に二つ目のアカウントに移行できたので、再度ホストしようと思いました。 目的 今回の移行には、以下のような目的がありました。 コンポーネント設計が自由すぎる どこまでをどうコンポーネント分けするのかは、Vue.jsやReactを使っている人ならよくあると思います。 僕自身も、学生で、インターンといえばサーバーサイド、インフラ、モバイルアプリしか歩んでこなかったので、フロントエンドを知識
TypeScript を採用している Nuxt.js プロジェクトで @nuxtjs/storybook を導入してハマったポイント - odan blog
TypeScript を採用している Nuxt.js プロジェクトで @nuxtjs/storybook を導入してハマったポイント 追記: 2020-11-20 v3.2.0 のリリースでこの問題は解決されました。 @nuxtjs/storybook とは Storybookを簡単に使うための Nuxt.js のモジュールです。 従来は nuxt.config.js とは別に、Storybook 用の webpack.config.js を別でメンテする必要がありましたが、このモジュールが nuxt.config.js から Storybook 用の webpack.config.js を生成してくれるので、不要になりました。 yarn nuxt storybook build がエラーで失敗する このモジュールがリリースされて、真っ先にこのブログに導入しました。しかしドキュメントの通り
Nuxt.jsでGoogle Tag Manager+Google Analyticsを使ってみた - くらげになりたい。
Google Tag Manager+Google AnalyticsをNuxtで使うときに、 ちょっとめんどうだったので、その備忘録。 タグマネージャで拾ってこれるのは、aタグとかのリンクとかHTMLベースだけ。。 なので、JavaScript側で行っているページ遷移とかは取れないのでよしなにやる必要がある。 タグマネージャのモジュールの導入 @nuxtjs/google-tag-managerというモジュールがあるのでそれを使う。 インストール $ npm i --save @nuxtjs/google-tag-manager nuxt.config.jsの設定 modules: [ ['@nuxtjs/google-tag-manager', { id: 'GTM-XXXXXXX', pageTracking: true, }] ], pageTrackingをtrueにするとPag
Ruby on Rails、Nuxt.js、MySQLのDocker環境を作成します。 Rails、Nuxtのalpine環境の構築手順はそれぞれだと多くあるのですが、まとまったものがあまり ない 見つからなかったので、復習を兼ねてポストを作成します。 準備 ディレクトリ作成 作業ディレクトリは任意です。 $ NEW_APP=rails-nuxt-app #任意のアプリ名 $ mkdir ${NEW_APP} $ cd ${NEW_APP} $ mkdir ./backend ./frontend
モチベーション ずっと更新してなかったブログを Nuxt.js から Astro に引っ越しました。 元々は技術的なメモを残す場として用意した場所でしたが、zenn.dev のスクラップ機能がリリースされてからは更新する理由がなくなっていました。 Astro を選んだ理由 Nuxt.js v3 がリリースされているので単純にバージョンアップするだけでもよかったですが、最近 Astro をよく聞くので勉強も兼ねてこちらを選択しました。 特に最近リリースされた Content Collections という機能を使ってみたいと考えていました。幸いにもこの機能は Nuxt.js の Content に似ているので引っ越し作業もスムーズでした。 引っ越し作業 段階的に引っ越すのは手間が多そうなのと、最悪事故っても問題にはならいないと考えて一気に引っ越しました。 https://github.com
Nuxt.js v2.9がリリースされました Nuxt v2.9.0 is out 🥳 - Typescript support now externalised (https://t.co/AlvY55s0cC) - Vue Meta upgraded to v2.0 - 10+ bug fixes 🐞 - 10+ new features 🚀https://t.co/vEfQoUWh8l pic.twitter.com/qwmSsEfkxJ — Nuxt.js (@nuxt_js) August 20, 2019 TSの対応方法がそれまでと大きく変わっているので、以前の記事からの差分をのせていこうと思います。 オフィシャルの手順は以下になります。 Migration from Nuxt 2.8 | Nuxt TypeScript Runtime 前述の移行手順とは順序が異なります
Nuxt.jsにおいてStore（ストア）を利用すると、データの状態管理をおこなうVuexによってコンポーネント間のデータの受け渡しを一元化できます。本記事ではそのStoreとvuex-persistedstateモジュールを利用してデータをLocal Storage（もしくはSession Storage）に保存してみます。 Storeにはクラシックモードとモジュールモードがありますが、本記事ではモジュールモードによる記述で説明していきます。２つのモードの違いについては公式サイトを参照して下さい。 Nuxt.jsによるプロジェクトの作成は下記ページをご覧下さい。 Nuxt.js入門 [$route.params][layouts] プロジェクト内のディレクトリを確認します。Storeによる機能は、主に「store」ディレクトリ内にファイルを追加していくことで利用できます。 $ tree
axios-moduleというのはNuxt-communityが提供してるプラグインです。オフィシャルのリストには入っていないのですが、Nuxtのドキュメントでもこちらを使用が推奨されており、事実上のオフィシャルプラグインだと思います。 下記の環境で試してます。 nuxt: 2.8.1 @nuxtjs/axios: 5.5.4 とりあえず相対パス指定する 開発と本番でAPI（など）のURLを変えたいということはあると思います。 例えば/static/data/の下にusers.jsonというJSONを配置します。そしてvueコンポーネントでそいつを取得するとします。とりあえずasyncDataで相対パス指定しますよね。
【Vue.js Nuxt.js】東京都が作った新型コロナウィルス対策サイトのnuxt.config.jsを眺めてみよう【コードのお勉強】｜ProgLearn｜エンジニアのためのプログラミング情報メディア
head: { htmlAttrs: { prefix: 'og: http://ogp.me/ns#' }, titleTemplate: '%s | 東京都 新型コロナウイルス対策サイト', meta: [ { charset: 'utf-8' }, { name: 'viewport', content: 'width=device-width, initial-scale=1' }, { hid: 'description', name: 'description', content: '当サイトは新型コロナウイルス感染症（COVID-19）に関する最新情報を提供するために、東京都が開設したものです。' }, { hid: 'og:site_name', property: 'og:site_name', content: '東京都 新型コロナウイルス対策サイト' }, { hid
はじめに Nuxt.jsの学習でTodoアプリを作成したので、理解した内容で少し機能の追加をしてみました。 0から作成する手順をまとめたいと思います。初学者のため、コード等お見苦しい箇所が多くあるかもしれません。お許しください 作成物 リポジトリ 機能 以下が主な機能でnewが追加した部分になります。 タスクが登録できる タスクに備考が登録できる new タスクに日付が登録できる new タスクを完了にできる タスクを削除できる UIフレームワークでVuetifyを使用する new 登録の際にダイアログを表示する new TodoとDoneは別々の表示領域を用意する new 前提 Googleアカウントを所持していること Nuxtの開発環境が用意してあること ※開発環境の用意についてはこちらにまとめてみました！ Firebaseの設定 データの格納場所としてFirebaseの CloudF
Nuxt.jsには簡単にプラグインを追加できる仕組みがある。createdやmothodsなどを拡張するmixinタイプや、ElementUIなどコンポーネントタイプ、vueインスタンスにコンテキストを注入してthisを拡張するタイプなどがあるのだが、TypeScriptと併用するとProperty $logger does not exist on type 'Store<RootState>'のようなエラーが発生する。 今回はvueインスタンスを拡張し、vueファイル（SFC）とstore内でthis.$xxxにアクセスするための型定義の作り方について紹介する。 プラグインを実装する サンプルのためLoggerプラグインを実装する。 // /plugins/logger.ts export class Logger { private readonly isDev: boolean c
nuxt.js+typescript環境で Property '$bvModal' does not exist on type~ とエラーが出てビルドできない問題をごり押しで解決 - Qiita
Property '$bvModal' does not exist on type 'CombinedVueInstance<Vue, unknown, { formatDateTime(date: Date): string; formatName(uid: string): string; deleteTopic(id: string, name: string): Promise<void>; }, { idNum: string; deletePermission: boolean; "name/names": any; }, Readonly<...>>'.
【Nuxt.js】create-nuxt-appのすすめ 〜create-nuxt-appの質問に負けたくないあなたへ〜 - Qiita
この記事はエイチーム引越し侍 / エイチームコネクト Advent Calendar 2019の10日目の記事です。 前日は、こぼさん(@anneau)の『Vueを使ってサイトを1ヶ月で作った話。そして、それを、1ヶ月使ってリプレイスした話。』でした！ 私も身近で引越し侍 まるごとスイッチを開発している姿を見ていたのですが、膨大な仕様のサービスを、2ヶ月という限られた期間で、スピード感もって開発していることがひしひしと伝わりました。 尊敬する大先輩の記事です。ぜひ読んでみてください！ 本日はぴかぴかの新卒1年生のちーずが担当いたします！ QiitaがPWAに対応していることに最近気づき、以前より記事を読むようになりましたが、投稿は久しぶりになってしまいました アイコンのQiitanのシルエットがかわいいので、スマホのホーム画面にQiitaを追加することをおすすめします はじめに Nuxt.
まず、Contentfulとは何か？ Contentful公式(英語)にある、キャッチを訳してみると… CMSがソフトウェアを出荷する途中に入ってはいけません。 Contentfulは、チームがあらゆるデジタル製品のコンテンツにパワーを与えることを可能にするコンテンツインフラストラクチャを提供します。 https://www.contentful.com/ コンテンツインフラ！ おお！これだ！(こういうの探してたw) WordPress(PHP)が好きじゃなくて、JavaScriptだけで構築できるWordPressみたいなCMSを探してたら、Qiitaの記事がヒットして発見〜♪ ↓その記事はこちら 次世代Headless CMS「contentful」事始め 上の記事見たら簡単に開始できました！ contentful図解 Contentfulだと何ができて何が嬉しいのか？ 【個人的に嬉し
売れるネットショップ研究所 橋本技研の技術系備忘録ブログ。 ショッピングカートシステムの制作などが得意です。 あるコーポレートサイトをリリースしたのですが、最初のレスポンスが返ってくるのがちょっと遅いのでなんとかしたい。 サイトの構成は以下のとおり。 サーバはVPS( 2GB: 1 CPU, 50GB Storage )Dockerで構成（いろいろ拡張の予定があるので、Docker swarmを利用）サイトはHeadless CMS + Nuxt.JS + SSRで構成/blog にWordpress（ブログ）を設置 尚、Headless CMS は、これとは別のサーバにインストールしてある。利用したCMSは、cockpitというOSSを採用。Cockpitは、いろいろカスタマイズが効いてかゆいところに手が届くので、マジでお勧め。 ※cockpit公式のDockerイメージは、アップロード
この記事をおすすめしたい人 Node.jsも知らんのにNuxt.jsを始めようとしてる人 レンタルサーバ上でNuxt.jsを動的出力させたい人 つまりオレ 何も知らない超初心者が脱WordPressしたくてNuxt.jsでサイト構築していくシリーズです。 今回はサーバサイドでNuxt.jsを動かすテストです。 インストールオプションに出てきた「Deployment target」の「Server」です。 (Staticの場合はビルドしたHTMLをアップロードするだけだと思います) エックスサーバーというサーバ上でテストを行いますが、どうもね…。 これは非常にマイナーな選択のようなんですよね。 でもまぁこのブログはエックスサーバーで動かしてるので、そのままエックスサーバーでNuxt.jsも動かしてみたいと思います。 僕はNuxt.js/Vue.js/Node.jsだけでなく、サーバの知識もか
前置き Nuxt.jsと言えばコンポーネント。 componentの内容を、ページによって少しで良いから変えたい… そんな時、slotに随分と助けられたので記録に残しました。 Vue.jsでも同様の使い方が可能です。 ※サンプルテキストはHello Nuxt.js!ではなくHello Vue.js!になっていますが、ご了承ください。 間違い等がございましたら、優しくご指摘いただけると嬉しいです！ 基礎編：超簡単な解説から実践編まで 応用編：全体のまとめ、propsとの違い を書いていきます。 slotって？メリットは？ ウェブサイトを作ってて、 「同じコードをコピペしまくってめんどいなぁ〜 あ！コンポーネント使えばいいじゃん！！ あれ？でもページによって○○だけ変えたいんだよなぁ」 って時、ありますよね？ コンポーネントを使いまわしたいけど、 ここの文字だけ変えたい！って時に使います。 （
1年間サーバーレスで運用したNuxt.js製サイトをTypescript移行した話とそこで学んだこと - Qiita
概要・前置き どうも、都内でフロントエンドエンジニアをしてます、かめぽんです。以前、Nuxt.js + Netlifyで爆速構築するサーバーレス開発入門という記事を書きまして、その記事と同じNuxt.js + Netlifyのシンプルな構成で作った、以下のサイトを１年間と３ヶ月ほど運用してきました。撮影からデザイン、インタラクションの実装からデプロイまで一気通貫でやってみました。 https://www.brightanddizain.com/ Lighthouseの評価もよくサイトがきっかけでお仕事もちょくちょくいただいたりと、おかげさまでここまでくることができました。（PWA対応もしてます） しかしながら、フロントエンド技術の流れが非常に早く陳腐化してきたことやサステナビリティを高めたいとは思いつつも課題が多かったのでこの機にnuxtのtypescript移行とそれに伴う環境基盤の構築
nuxt.js Firebase PWAではじめる ブロックチェーンアプリ開発：Blockchain Biz Community
★技術書典14に合わせて、内容を更新しました。現在の最新の環境に対応しております。 EthereumのブロックチェーンとNuxt.jsを使ってPWAを開発できるようになる本です。これまで、どうしても必要だったブラウザのプラグイン MetaMaskを排除しPWAとしてスマホで動く、ユーザーフレンドリーなブロックチェーンアプリを開発できるようになるまでの流れを解説しています。 とりあえず一通り動かすことを目指しており、Nuxtやブロックチェーンのアプリケーション開発の深いところには触れていませんが、無料のオンラインのコンテンツと併せて使われることをお勧めます。
概要 自作のNuxt.jsはSSRモードでfirebaseにホスティングしようとネットで方法を探してました。 見つかった記事は2019の物でちょっと古くて（実際その通りやったら詰んでしまう）困ってました。 そこでこの記事とこの動画を参考になんとかデプロイできました。 でもどれも英語だったのでせっかくなので日本語の記事を書こうと思った次第です。 手順を見たくない方へ このボイラープレートをそのまま使う。 手順1 新規Nuxtアプリを作成する 注意 nuxt本体のソースコードを管理しやすいために/srcの中に入れてますが、そうしなくても良いです。ただ後述のfirebase.jsonのpredeployの設定をご自身のパスに合わせて修正してください。 手順2 まずfirebaseでアカウントを申請し、新規プロジェクトを作成してください。 nodeバージョンを10以上を使うため、プランはblaze
概要 JavaScript(Nuxt.js)におけるeventオブジェクトについて学習したので備忘録として記載します。 eventオブジェクトとは、ユーザーによってイベント（クリックイベントなど）が発生した際に そのイベントの情報が格納されたものです。 プロパティを呼び出すことや、メソッドを使用することができます。 プロバティ例 Event.target: イベントが発生した要素 Event.type : イベントの名前 ...etc メソッド例 Event.preventDefault(): イベントのデフォルトの挙動をキャンセル ...etc 使用例 使用方法は関数に第一引数を取るだけです。 引数名は何でもいいのですが、慣例的にeやeventとすることが多いです。 index.vue <template> <v-btn @click='type' <!-- clickされた際にty
Are you new to the Nuxt.js framework and totally overwhelmed by the number of folders it comes with? Are you also surprised that most of them are empty with just the readme file in them? Well, that’s where I was little over a year ago. Since then, I’ve always wanted to learn and document the magic that each folder brought into the Nuxt project. And now, after implementing a few projects with this
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[Nuxt.js入門] 全体像をざっくり掴むためのポイントまとめ - Qiita
爆速でLambda@edgeにNuxt.jsを構築できるテンプレートを作った - Qiita
Nuxt.jsでTypeScript 3.7を使う - Qiita
Nuxt.jsで認証認可入り掲示板APIのフロントエンド部分を構築する #1 環境構築 - Qiita
Nuxt.js + Firebase で画像ファイルアップロードする - volpe’s diary
Nuxt.jsのserverMiddlewareでモックアップのAPIを設置 – webdev
NUXT.jsでSSRする場合の落とし穴 - Qiita
【Nuxt.js】iOSでブラウザバックした時、元のスクロール位置に戻らない - Qiita
Nuxt.jsでウェブストレージを扱う - Qiita
Rails & Nuxt.jsのDocker環境をalpineイメージで構築 - Qiita
ブログを Nuxt.js から Astro に引っ越した - odan blog
Nuxt.js 2.9でのTypeScript対応 - Qiita
Nuxt.jsのStoreによるデータ保存 [vuex-persistedstate][js-cookie]
Nuxt.js の axios-module（プラグイン）で開発環境と本番環境で取得先のURLを変えたい
Nuxt.js - Firebaseを使ったToDoアプリの作成 - Qiita
Nuxt.js＋TypeScriptでプラグインの型定義を作成する
【WordPress脱却】APIベースなCMS「Contentful」と Nuxt.jsでブログシステム爆速構築の巻【ちゃんとSSRでSEO】
Docker上で走るNuxt.JS + SSR のサイトをVarnishを使って爆速化した話。
初心者がレンタルサーバ上でNuxt.jsをどうにか動かした | オレDEV.com
【Nuxt.js】slot基礎編：コンポーネントの一部を置き換えよう - Qiita
【Nuxt.js】Nuxt.js SSRモードでfirebaseにデプロイする手順 2020年版
JavaScript（Nuxt.js）のeventオブジェクトとは - Qiita
Universal application code structure in Nuxt.js