サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
ノーベル賞
qiita.com/amishiro
初のアドベントカレンダー参加。こんな内容でいいのかなと思いつつ…nuxt.jsにSEOに必要なmeta(OGP)タグを入れていきます。 SEOに必要なmeta(OGP)タグを入れたい nuxt.jsでは、metaタグのコントロールにvue-metaが使われている。これ、ページ数が増えるとめんどくさい記入漏れなどのミスが起こる。なので、最低限必要なmeta(OGP)をフォーマット化しておく。あとから仕様を変更できればなおよし。 今回の目標 The Open Graph protocolを参考にしつつ、meta(OGP)を以下のようにしたい。(icon関連はPWAの設定と一緒にやるので今回は保留。) <html prefix="og: http://ogp.me/ns#"> <head> <!-- title/description --> <title>タイトル</title> <meta
本稿は「Nuxt.js(v2.6.x)やっておきたい設定シリーズ」の第1段です。 その1/3|create-nuxt-app〜各種プラグインの導入まで。 その2/3|SEOに必要なmetaとogpの設定及びpwa(Manifest、Icon、Workbox)の設定 その3/3|コンポーネントフィアルの管理方法とloading・各種トランジションの設定 「Nuxt.jsやっておきたい設定:その1/3」として、サイト制作やアプリ開発などに入る前にやっておきたい設定をまとめた。「その2/3」では、Workbox、Manifest、Meta、Icon、Ogp(OneSignalはサーバーが関わるの本稿ではやらない)などのSEOやPWAに係る部分を記載。「その3/3」になって、やっとコンテンツ部分に入ってコンポーネントとか。 とりあえず、以下「その1/3」の設定をすれば、中規模程度までの開発に困るこ
nuxt.jsでは、特殊な事情がない限り3つのディレクトリにコンポーネントファイルが格納されます。layouts pagesディレクトリについては公式ドキュメントを参考にし、残りのcomponentsディレクトリについてオリジナルの規約(整理方法)を定めてます。後々喧嘩にならならないように。 /layouts /pages /components <- オリジナルの規約について 規約はいいすぎ?以下は至極基礎的な案なので、みんな仲良く話し合えばいいと思います。 格納するファイル componentsディレクトリに格納するのは、「再利用可能」もしくは「複数回利用」するコンポーネントと定めます。 再利用可能なコンポーネント 他プロジェクトでも流用する可能性がある 他プロジェクトでも必ず作成するから置き場を固定したい 複数回利用するコンポーネント UIに関するコンポーネント カテゴリ単位で使い回
2019/12/24 現状、macとwindowsで出力形式が違います。 解決ができていないので、以下記事は微妙。 nuxt generateで静的ファイルの生成・納品をしていると「差分でほしい」とおねがいされることがある。 差分で受領するメリットは 修正したファイルのみアップロードするため、先祖返りが起きにくい。 修正箇所が比較しやすい。 の2点。 ディフォルトでは、ファイル名がhashになりnuxt generateのたびに全ファイル修正となる。また、修正箇所を比較するにもminifyされているため、diffできない。 上記2点のメリットが無くなってしまうので、設定を変更しておく。
pugやstylusなどのインデント記法は、見やすく、そして、誰が書いても綺麗になる(整形ツールいらない)ので好き。 nuxtでは、NPMパッケージをインストールするだけで使える。素晴らしい。 nuxt.js(v2)は設定済みの想定 ↓ nuxt.js(v2)の導入方法 1.NPMパッケージをインストール 本体とコンパイルするためのlodaerをインストール ※nuxt.js(v2)から、pug-plain-loaderが必要になっている。忘れずに。 // pug $ npm i pug pug-loader pug-plain-loader // stylus $ npm i stylus stylus-loader <template lang="pug"> .container h1.red Hello {{ name }}! </template> <script> export
Nuxt.js(v2)でgenerate納品する前にやっておきたい設定 Nuxt(v3)版書きました。 リリース情報確認URL Nuxt.jsのリリースノート create-nuxt-appのリリースノート node.jsのリリースノート VScodeのアップデート情報 動作確認済みバージョン Node.js(v14.8.0) npm(v6.14.7) Nuxt.js(2.14.4) create-nuxt-app(v3.2.0) macOS Catalina(v10.15.6) terminal(zsh) VScode(v1.48.2) 更新履歴 2020/9/1 nuxt.js(v2.13)から、generateプロパティーにroutesを設定しなくても大丈夫なようになっていたので該当箇所を削除。 2020/8/29 create-nuxt-app(v3.2.0)用にリライトしました。
■動作確認済みバージョン nuxt.js(2.11.0) create-nuxt-app(v2.12.0) ■更新履歴 2020/2/5 最新のバージョンに合わせてリライトしました。 .browserslistrcファイルが使えるようになりました。 お勧めのpolyfill設定方法を追記しました。 特に設置の必要はありません(cool!)。以下に、確認・変更のポイントを記載します。 対応ブラウザの確認方法 対応ブラウザは「browserslistパッケージ」で確認します。ターミナルで% npx browserslistを実行してください。 % npx browserslist ディフォルト設置の対応ブラウザ ↓ and_chr 79 and_ff 68 and_qq 1.2 and_uc 12.12 android 76 baidu 7.12 chrome 79 chrome 78 chr
このページを最初にブックマークしてみませんか?
『@amishiroのマイページ - Qiita』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く