NuxtJS

ポートフォリオサイトをリニューアルしました! (技術的な解説あります)

はじめに

1年以上前から考えていた、ポートフォリオサイトのリニューアルがやっとできました。

といっても今回はまだシンプル版のリリースで
そのうちWebGLを組み込んだリッチ版をリリース予定です。

以下のサイトが以前のポートフォリオで、機能的にはまだ生きているんですが3年前に作ったもので技術も古く、あまり見せたくなくなってしまったのでこのサイトは更新せずに、お仕事のリリース報告などはSNS上で

もっとみる

Nuxt.js scrollBehaviorが効かない時

Nuxt.jsでページ遷移時に設定した scrollBehavior にしていた挙動が動かなくなりました。

原因としては全体に関わるcss内で、modal表示にその背景となるページをスクロールさせないために

html, body { overflow: auto; height: 100%;}

としていたのがよくなかった模様。

なのでmodal表示時のみに上記の指定をさせるために

htm

もっとみる

NuxtにGoogle reCAPTCHA v3 を入れる。

reCAPTCHA

Nuxtで作った問い合わせフォームにbot対策でgoogle reCAPTCHA のVernon 3を導入しました。v3 は機械学習により読みにく文字を入力したりあいまいな画像選択させたりすることなしで、人間かbotかの判定を0(bot)から1(botではない)のスコアにして返してくれるそうな。

Google reCAPTCHA https://developers.goo

もっとみる

既存サイトをNuxt.jsに乗り換えてみた

初めまして。この記事からnoteの投稿をしていく、トゥモローゲート株式会社でフロントエンドエンジニアをしている西川と申します。

技術選定の幅を広げるため、技術導入する話やエンジニアが思ってること考えていることを投稿していこうと思います。

0.はじめに

今回は、サイトの高速化を目指して、サーバーサイドレンダリング(SSR)の実装をするため、JavaScriptフレームワークのNuxt.jsをテ

もっとみる

POCり語ラク道場(19/04/21/今日中♪)

ぽっくり参った〜(略してポクッター)ファウンダーの◯◯◯ッチほほぃ!

今んとこ新たに11記事が上昇中なんで、早目に放出しラクになっちまおぅw

♥。・゚♡゚・。♥。・゚♡゚・。♥。・゚♡゚・。♥。・゚♡゚・。♥。・゚♡゚・。♥。・゚♡゚・。♥。・゚♡

⏬ 5/18,19に埼玉・メットライフド〜ムで対バンライブしゅるにょぉ〜w ⏬

♥。・゚♡゚・。♥。・゚♡゚・。♥。・゚♡゚・。♥。・゚♡゚・

もっとみる

【Nuxt.js】 @nuxtjs/axios で axios.all() が使えない

axios.all() とは

複数の API の並列処理ができる
axios.all() は Promise.all() のラッパー関数

import axios from 'axios'const api = axios.create()return axios.all([ api.get('https://xxxxxxxxxxxx'), api.get('https://xxx

もっとみる

Nuxt.js + Netlify で RSS を取得して静的 JSON にする

やりたいこと

IFTTT を使って note の更新を検知

Nuxt.js で note RSS を取得して、静的 JSON としてダウンロード

コンポーネント内で読み込みたい

けっこう改造した動作サンプルはこちら

使うもの

- Nuxt.js
- Netlify (デプロイ方法は割愛)
- IFTTT (Netlify に note の更新通知を送信する)

Nuxt.js をイ

もっとみる

note engineer meetup #2 で Nuxt.js移行プロジェクトの話をしました

先日 2019/02/21 note engineer meetup #2 が弊社オフィスで行われました。

そこで、「続Nuxt.js移行プロジェクトの話」というタイトルで発表させていただきました。

会場にお越しいただいたみなさま、ありがとうございました🙏🙏🙏

* 会場で補足し忘れていたんですが、Dynamic Import は HTTP/2 が前提の施策です

引き続き、一緒に no

もっとみる

PHP(Laravel) でエンドポイントをつくって、 Nuxt.js に渡す

ディレクトリ構成

Nuxt.js, Laravel 別々にディレクトリを作成し、それぞれ個別のプロジェクトとして扱います

- nuxt-project  # Nuxt.js - Nuxt のファイルたち- laravel-project  # Laravel - Laravel のファイルたち

Laravel をさわる

Laravel をインストール

composer create-

もっとみる

Firebase + Nuxt.jsでプロジェクトをセットアップする手順書

GitHubでリポジトリ作る

Nuxt.jsのプロジェクトを初期化する

まず作ったリポジトリからgit cloneしてこよう。

https://ja.nuxtjs.org/guide/installation を参考に初期化コマンドを実行する。

Project name と Project description は適当に書こう。

Firebase上に配置するのでUse a custom

もっとみる