NuxtJS

Nuxt.jsでh1(ページタイトル)をlayoutsレンダリングする方法

エンジニア向けの記事です。Nuxt.jsでヘッダーやらに入れる文字をページごとに変えたいけど、記述はlayoutsに纏めたいという方向けの記事です。

できること

記事タイトルやら、記事のサムネイルやらをlayoutsで表示することができます

前提

・単一ファイルコンポーネント使ってる
・ブログの記事タイトルとかパンクズとかをlayoutsでレンダリングする
・vuex利用

結論

pag

もっとみる

Nuxt.jsでAMP HTMLをgenerateする方法

エンジニア向けの記事です。それも、Nuxt.jsでgenerate(出力)するファイルをAMPにしたい!というエンジニア向けです。

前提

・特にamp用のmodulesとかは使いません。色んなところに落ちてるコードを引っ張って作った感じです。
・単一ファイルコンポーネントで作ってます。なのでCSSは「ページ用スタイル」「共通スタイル」みたいな感じで分かれてます。
・SCSS使ってます。共通スタ

もっとみる

【Nuxt.js】faviconの設定方法

Nuxt.jsでfaviconの設定方法です。

デフォルトでは下記faviconが設定されています。

こちらを変更します。

faviconはstaticディレクトリ内にあるfavicon.icoというファイルで制御されています。

こちらを変更することで、faviconの変更が可能です。

以上です。

もっとみる
あなたのnoteも見に行きますね〜!

Nuxt.jsにてFontAwesomeを利用する方法

Nuxt.jsにてFontAwesomeを利用する方法を説明します。

下記実行します。

yarn add @fortawesome/fontawesome-free-webfonts

※「fontawesome・・・」ではなく、「fortawesome・・・」なのでご注意を。

nuxt.config.jsのcssに追記します。

css: [ //下記追記 '@fortawesome/fo

もっとみる
励みになります!

【Nuxt.js + contentful】a hrefでエラーが出た。→ 解決した。

どんな状態でエラーが出たか

1. ContentfulでURLフィールドを作成し、URLを記入した

2. Nuxt.jsのvueに下記のようにリンクを書いた

<a href="{{post.fields.url}}">{{post.fields.url}}</a>

3. すると、下記のようなエラーが表示された。

Errors compiling template:

href="{{po

もっとみる
嬉しいです!
1

noteをNuxt.jsで再構築した話-2nd-というタイトルでお話してきました #cat_vol7

2019-08-17 CaT vol.7 真夏のVue.js祭りにて、

「noteをNuxt.jsで再構築した話 -2nd-」

というタイトルで発表させて頂きました。

発表スライド

資料内の紹介コンテンツ

・noteをNuxt.jsで再構築した話
・Nuxt.js
・ZenHub
・ERROR: aws-serverless-express connection error with e

もっとみる
ありがとうございます m(_ _)m
33

最速でNuxt.jsを構築する

一番簡単なNuxt.jsの構築方法です。

1. Nuxt.jsをインストールするディレクトリに移動

ターミナルを開き場所を移動します。

cd 好きな場所 

2. Nuxt.jsをインストール

下記コマンドにてNuxt.jsをインストールします。今回は「lm」という名前で作成します。

npx create-nuxt-app lm

すると、いくつか対話式で質問があります。特に気にしなけれ

もっとみる
あなたのnoteも見に行きますね〜!
1

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

はじめに

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

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

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

もっとみる
少しでもあなたのお役に立てて嬉しいです。
18

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

もっとみる