Nuxt.js
microCMSのリッチエディタですが、下記サービスの埋め込みに対応しています。 YouTube（https://www.youtube.com/） Vimeo (https://vimeo.com/) Twitter (http://www.twitter.com/) Instagram (https://instagram.com) Facebook (https://www.facebook.com/…
先日、Contentful + Nuxt.jsでつくったサイトのAPIキーの隠蔽を試みましたが、今回はそのサイトをAmplifyを使って公開する際の.envの作成方法をまとめておきます。公式サイトに書いてある通りの方法です。docs.aws.amazon.com ❶ 環境変数を設定 Amplifyコン…
※ Contentful と Nuxt.js の説明は省きます。www.contentful.com ja.nuxtjs.orgContentfulとNuxt.jsをつかってウェブサイトを使う場合、こちらの公式のドキュメントを参考にしていました。www.contentful.comが。Nuxt.jsの2.13からdotenvの扱いがより便利に…
久しぶりにNuxt.jsでプロジェクトを作成したところ、コンポーネントの自動インポート周りでエラーが起こりました。 結論 結論を先に書くと、Nuxt.js（v15.0）からnuxt/componentsがv2に切り替わったことと、僕がAtomic Designのルールにのっとり、components…
久しぶりにNuxt.jsでプロジェクトを作成したところ、sass-loaderがエラーを吐きました。 Module build failed (from ./node_modules/sass-loader/dist/cjs.js): TypeError: this.getOptions is not a function at Object.loader Nuxt.js（2.15.7）とsass-loa…
<nuxt-link to="#hash">hashchange</nuxt-link> とか、 <nuxt-link to="{ hash: '#hash' }">hashchange</nuxt-link> というリンクをクリックしてhashを変化させた時、 window.addEventListener('hashchange', () => { console.log('hashchange!'); }); と、設定したハッシュチェンジイベントが発火せずにとても困っていました。※ nuxt 2.12.2の…
mounted で window.twttr.widgets.load を実行すればOKです。 nuxt.config.js export default { mode: 'spa', head: { script: [{ src: 'https://platform.twitter.com/widgets.js' }] } } ウィジェットを埋め込んだコンポーネント <script lang="ts"> import { Component, Vue…
Nuxt.jsにて、 import '~/assets/css/common.scss'; という感じで、scssをインポートしているComponentをテストしようとすると、 SyntaxError: Unexpected identifier と、SCSSがパースできずJestがコケて困ってました。解決策を探してみたところ、 vue-jest…
プロパティの作成 いつの間にやらGoogleアナリティクス4たるものがリリースされていました。support.google.comが。Nuxt.jsとの組み合わせを考えると、まだユニバーサルアナリティクスを使った方が良いみたいなので、アカウントをつくるときに、「ユニバーサ…
www.npmjs.comTypeScript導入済みのNuxtプロジェクトにdelegateを導入しようと思ったのですが、 Could not find a declaration file for module 'delegate'. '/node_modules/delegate/src/delegate.js' implicitly has an 'any' type. Try `npm install @typ…
micoCMSを使った実装 基本的には公式のブログの通りに実装すればOKです。https://microcms.io/blog/nuxt-secure-api-key/microcms.io .env API_KEY=XXXXXXXXXXXX nuxt.config.js require('dotenv').config(); const { API_KEY } = process.env; const isDeve…
結論から書くと、ものすごく単純な話なんですが、大文字小文字はしっかり区別しようという話です。 Nuxt.jsで作ったプロジェクトがローカルだとビルドが通るのに、CIだとコケていて「なんでだろう」と思いログを確認してみました。 [fatal] Nuxt build error…
はじめに はてなブログのRSS取得 Nuxtプロジェクトの作成 Nuxtプロジェクト内でAPIを取得し、静的なHTMLとして書き出す準備 静的なHTMLとして書き出す準備 はじめに はてなブログの最近記事30件と、JSONに記載されているモックを取得して羅列するウェブサイ…
昔はReact派だった僕も、いまとなってはJavaScriptの書き方的にはReactでもVueでもどちらでも構わないぐらいになってきました。 NextJSとNuxt.jsを比べると、CSSの管理の仕方がNuxt.jsの方が好き、というかSFCが好きなので、どっちでも良いと言われた時は、…
nuxt generateで静的書き出ししたウェブサイトをGitHub Pagesにアップすると、_nuxt以下のファイルが404になってしまいます。原因としてはこちらに書いてある通りなのですが、アンダースコア (_)、ピリオド (.)、またはハッシュ記号 (#) で始まる、またはテ…
凄くレアなケースだと思うのですが、Nuxt.jsをつかってサイトを作っているとき、ある階層以下はVueを使わない普通のHTMLをホスティングしたいこともあると思います。例えば、 /policy/index.html にVueを使わずにつくったHTMLを置きたいときなどです。そんな…
解決したので記録を残しておく。 困っていたこと TypeScriptを有効にして、あとはデフォルトの設定で作成したNuxtプロジェクトで、 ERROR Failed to compile with 1 errors This relative module was not found: ./index.vue?vue&type=script&lang=ts& in ./…
根本的には未解決なのだが、記録を残しておく。 実行環境 OS: macOS Catallina（10.15.6） node: 12.10.0 yarn: 1.22.5 nuxt: 2.14.0 実行手順 yarn create nuxt-app app? Project name: app ? Programming language: TypeScript ? Package manager: Yarn ? …
blog.kimizuka.orgまたもや、 The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside , or missing . Bailing hydration…
Nuxt.jsを使ったプロジェクトでページ内スクロールを実装する際は、vue-scrolltoを使うと楽々です。 楽々なんですが、開発にTypeScriptを使っていると、導入までの手順が増えるので、今回はそこをまとめようと思います。 vue-scroll導入手順 ❶ nuxt.config.j…
blog.kimizuka.orgNuxt.jsでSVGを扱うときにコンポーネントのように扱えるようになる便利なローダー、nuxt-svg-loader ですが、オブジェクトが返ってくると都合が悪いケースもあります。 <template> <img src="~/assets/img/title.svg" alt="title" /> </template> というケースや、 <style> .title { background: url(~assets/img/title.s</style>…
blog.kimizuka.orgテストの仕方を先に記事にしてしまいましたが、nuxt-svg-loaderとTypeScriptの共存のさせ方もまとめておきます。 nuxt-svg-loaderとは www.npmjs.comNuxt.jsでSVGを扱うときにコンポーネントのように扱えるようになる便利なローダーです。 …
Nuxt.jsでウェブアプリをつくっていたら、 The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside , or missing . Baili…
すべて 公式のドキュメント に書いてあることなので、わざわざまとめるほどのことでもないのですが、せっかく調べたのでまとめておきます。ja.nuxtjs.org nuxt generateとは 動的なルーティングとは nuxt generateでは動的なルーティングは無視される nuxt g…
Nuxt.js は開発環境を整えるのがとても簡単で、セットアップが終われば、 yarn devnpm run devのいずれかで、すぐに開発サーバが立ち上がります。このときのURLは、ポート3000が空いていれば、 http://localhost:3000もしくは、 http://0.0.0.0:3000となりま…
www.npmjs.comNuxt.jsでSVGをいい感じに使いたいときはnuxt-svg-loaderを使うと便利です。 <template> <div> <icon /> </div> </template> <script lang="ts"> import Icon from '~/assets/svg/icon.svg'; @Component({ components: { Icon } }) export default class Button extends Vue {} </script> こんな感じで、SVGをコンポ…
いま振り返ると単純な話だが、ものすごくはまった。 ことの発端 結論 疑ったこと ことの発端 Nuxt.js + Firebase Hosting + Cloud Functions でSSRを実現しているプロジェクトが動かなくなった {"code": "MODULE_NOT_FOUND"} と表示されるので、なにかモジュ…
