I found in the doc here introducing using <Script> but it doesn't seem working at all. Anyone managed to place tag manager or analytics code snippets to Nuxt 3 project please? (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googleta

useHeadとtitleTemplateを使う app.vueでtitleTemplateを使います。pagesディレクトリにページごとにコンポーネントを置く想定です。config.public.appNameにアプリケーション名を定義したとします。 <script lang="ts" setup> const config = useRuntimeConfig() useHead({ titleTemplate: (titleChunk) => { return titleChunk ? `${titleChunk} - ${config.public.appName}` : config.public.appName }, }) </script> <template> <div> <NuxtLayout> <NuxtLoadingIndicator /> <NuxtPage />

<!-- Google Tag Manager (noscript) --> <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> <!-- End Google Tag Manager (noscript) --> いろんなやり方ある・・・が、自社案件じゃないと歯がゆい 公式モジュール nuxt公式が出しているGoogleTagManager用のモジュールを使ってみる。 ところが情報色々ぐぐってみると、 デフォルトではページビューの計測オプションがfalseになっており、 計測したい場合はこちらのオプション有効化することに加

Plugins in Nuxt allow you to extend your App functionalities- Allow functions to be available on client-side and server-side- Using. your favorite Vue.js plu...

発生事象 Nuxt.jsでnuxt-linkを利用して、同じページの特定のセレクターに移動する場合、スムーズではなく、瞬間移動したようになってしまう。 その他、同様の問題で以下のような事象が発生する可能性がある。 遷移した先で、固定ヘッダーがある場合に表示位置がズレる アンカーリンクがある状態でブラウザの「戻る」を実施した際に、トップにいかず、アンカーリンクの位置までスクロールが戻ってしまう 解決策 これを解決するためには、2つの方法がある。 1. vue-scrolltoを導入する github.com 2. v2.9.0 以降で導入された、scrollBehaviorを上書きして設定を追加する ja.nuxtjs.org それぞれについて実装してみたので比較も含めて記載する。 1. vue-scrolltoを導入する 基本的には、README記載どおりに設定することで気軽に使うことがで

faviconを設定するだけなのに、数時間かかってしまいました汗 記事通りにやってもうまくいかず、vite公式ドキュメントを見てようやく解決しました。 （上手くいかなかった原因は、設定方法が書かれた記事の多くはnuxt2用（webpackを使用）の設定方法だからです。Nuxt3はデフォルトでviteを使っているので、viteのドキュメントを見て解決したというわけです。） 詰まっている人の助けになったら幸いです。 favicon設定方法 STEP 1 favicon.pngを作成する 16px x 16px もしくは 32px x32pxをファイルを用意する

インストール nuxt-create-app とかで作ったものなど、既存の Nuxt プロジェクトに sass をインストールします。fibers というパッケージも合わせてインストールします。 fibers はコンパイルの高速化のために必要とのこと。 To avoid this performance hit, render() can use the fibers package to call asynchronous importers from the synchronous code path. Sass: Dart Sass Nuxt.config.js への設定 Nuxt.config.js で webpack の loader 設定を記述します。 import Fiber from 'fibers' import Sass from 'sass' const sass =

ハコザキです。 今回はNuxt.jsプロジェクトに導入するScss周りの環境構築をご紹介します！ Nuxt.jsプロジェクトの新規作成についてはこちら Nodeのバージョンは16.8.0で進めていきます！ Dart Sass について 今回はDart Sassをインストールします。 Dart Sass は 公式で推奨しており、新機能が先行実装されます。 一方、Node Sassもインストールできますがこちらは非推奨（Node.jsのバージョンに依存..）となっております。 公式サイト インストール 下記コマンドで必要ライブラリインストール

本文書ではVue.jsのフレームワークであるNuxt.jsを使ってアプリケーションの開発を効率的に行いたいという人を対象にNuxt.jsのインストールを行った実環境を利用して動作確認を行いながら基本機能の説明を行っています。 Vue.jsのシンプルなコードで記述していますがVue.jsの知識があることを前提に説明を行なっているためVue.jsを知らない人には少し難しい内容になっています。Nuxt.jsを使いこなためにはvue.jsを理解する必要があるのでNuxt.jsを学習する前にVue.jsを先に学習することをお勧めします。 動作確認を行っているNuxt.jsのバージョンはv2.15.7です。現在はNuxt 3のRelease Candidateを利用することができます。最新バージョンのNuxt 3のチュートリアルではないので注意してください。Nuxt 3がリリースされたのでNuxt 3

こんにちは！のせっちです。 Web制作エンジニアとして普段はHTML/CSS, WordPressを中心に書いています。 僕のようなWebエンジニアがNuxt.jsでLPを書くために必要な知識をご紹介します。 なぜLPをNuxtで書くのか？ 僕がNuxtでLPを書こうと思ったきっかけは下記です。 コンポーネント化して使いたい（header, footerなど）for文を使いたい。metaタグを別で管理したい。一緒に入ってくるビルドツールを活用したい。 ということで、要は見通しよく、効率よく書きたいということです。 LPコーディングですので、データベースとの連携等は行いません。 これだけでグッと難易度は下がります。 コラム： これはとても個人的な理由ですが、ejsがどうにも好きになれなくて、勉強を兼ねてNuxtでLPを書いてみたら便利だった！という感じです。 LPをNuxtで書くために必要な