Nuxtにvue-awesome-swiperを入れてスライドショーを実装する
vue-awesome-swiperの記事はたくさんあったけど、バージョンによってエラーが出たり出なかったり、地味に時間がかかったんだよね 環境 nuxt 2.14.0 インストール 早速swiperとvue-awesome-swiperを入れていきます。 ※参考にしたサイトではvue-awesome-swiperのみのインストールが多かったのですが、swiper本体もインストールする必要があります。 2021年1月現在でバージョン指定をせずインストールをすると下記のバージョンでインストールされます。 Swiper 6.4.7vue-awesome-swiper 4.1.1 Swiper 6系ではページネーションやナビゲーションボタンが動作しなかったため、5系をインストールしています。githubの公式でも5系が推奨されていました。 プラグインとして設定する インストールしたvue-awe
【Vue.js】子コンポーネントのmounted後に処理を実行したい
JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。
Nuxtでcross-envを使い環境ごとに環境変数を分ける - Qiita
cross-envはNodeのライブラリでnpmスクリプト実行時に任意の環境変数を設定できます。 これを利用して、開発（ローカル）、検証、本番環境の設定切り替えが可能なビルドを実現します。 各環境の英語と日本語の対応付は以下です。 開発環境 = development environment 検証環境 = staging environment 本番環境 = production environment 利用するファイルは以下です。すべてディレクトリ直下に置いています。 env.development.js (開発環境用ファイル) env.staging.js (検証環境用ファイル) env.production.js (本番環境用ファイル) package.json (環境変数設定を含んだnpmスクリプトを記述するファイル) nuxt.config.js (環境変数に応じた設定ファイルを
【Nuxt.js】SPA（シングルページアプリケーション）で作るお洒落なページ遷移 | 東京のホームページ制作 / WEB制作会社 BRISK
Web技術の発展に伴い、近年のWeb制作はより複雑で面白いものになってきました。 そこで、今回はSPA（シングルページアプリケーション）で作るページ遷移のデモを制作しましたので、ご紹介しようと思います。 Contents Nuxt.jsについて導入方法シンプルでシームレスなページ遷移SPAを使用するメリットとデメリットサイト紹介まとめNuxt.jsについてSPAを構築するにあたり、今回はJavaScriptライブラリ（以下jsライブラリ）のフレームワークを採用することにしました。jsライブラリは有名なものだと「React」や「Vue」などが該当しますが、今回は「Vue」のフレームワークである「Nuxt.js」を使用します。 Nuxt.jsはVueアプリケーションを作成するフレームワークです。ユニバーサルアプリケーション、静的に生成されるアプリケーション、シングルページアプリケーションの中か
API通信一切なし！Nuxt Composition APIで作る完全静的サイト - ICS MEDIA
Vue.jsにはOption APIやClass方式があり、Vue.jsバージョン3からはComposition APIも増え、さまざまな作り方があります。Vue.jsを基礎としているフレームワーク、Nuxt.jsも同様にNuxt Composition APIとしてNuxt.js用に拡張されたものがリリースされています。 さらにNuxt.jsには静的サイトジェネレートという強力な機能があります。Nuxtの静的化のための機能はOption APIで提供されていましたが、Composition APIでの使い方はあまり解説記事がありません。本記事ではNuxt Composition APIを使って静的サイトを生成する方法を解説します。 下記は実際にNuxt Composition APIで静的化したものと、非同期処理を比べたデモです。 サンプルを別ウィンドウで開く コードを確認する Nuxt
Nuxt実装ルールまとめ - Qiita
はじめに Nuxtは他のフレームワークに比べるとNuxt自身の規則はさほど厳しくないため、同じ動作でも書き方や構成が複数存在することが多々あります。 今回まとめたものは、Nuxtの規約についてまとめたというよりも使いやすくするための一定のルールまとめなので、これがベストプラクティスというものではありません。 ひとつの基準として参考にしていただければと思います。 基本のフォルダ構成 $ npx create-nuxt-app <project-name> で生成されたフォルダを管理しやすいように以下の構成にします。また、このフォルダ構成にするために、必ず nuxt.config.jsに srcDir: 'src/'を指定します。 . ├──node_modules ├──src │ ├── assets │ │ ├── images │ │ ├── scss │ │ └── css │ ├─
nuxt.js(v2)でSEOに必要なmeta(OGP)で入力漏れの事故をなくす - Qiita
nuxt.js(v2)でSEOに必要なmeta(OGP)を入れたいで、最低限必要なmeta(OGP)をmixinにまとめた。このままでも使えるけど、共通化できるものを整理してつつ入力漏れの事故をなくしたい。 今回の目標 基本情報はnuxt.config.jsで管理する 以下をnuxt.config.jsで管理しつつ、環境変数でいつでも変更できるようにしておく。 サイト名 共通のディスクリプション ドメイン ベースディレクトリ OGP画像置き場 下層ページのmeta(OGP)情報未入力時の対応をする 下層ページでmeta(OGP)情報の書き忘れが発生してもいいようにする。全ページ内容を変えるのはSEOにっとて大事。入力しなくても、全ページ違っていてほしい。そもそも、ページURLとか、毎回書かなくてよくない？ ということで、こんな感じを目標に… タイトル titleTemplate機能は使わな
Vue.jsでアクセス元（referrer）を取得する
リファラーのデータを集め用とした際に、document.referrerを使っても前のページが取得出来なかった。 $routeを使っているとdocument.referrerで接続元が取れないらしい。 下記のようにbeforeRouteEnterを用いることで、接続元を取得することが出来た。 data() { return { prevRoute: null }; }, beforeRouteEnter(to, from, next) { next(vm => { vm.prevRoute = from }) }, methods: { hogehoge() { console.log("リファラー：" + this.prevRoute.path); } } 参考サイト teratail VueRouterで前のページのURLを取得することは可能でしょうか？ https://teratai
Nuxt.jsのUniversalとSPAが全然理解できなかったので実際に動かして学ぶことにした | オレDEV.com
今回はNuxt.jsのUniversalとSPAについて考えます。 対象者は僕と同じように「WordPressばっかりだったけどNuxt.jsに興味を持った人」、あるいはそれに類似するレベルの人で、 Node.js Vue.js Nuxt.js その他JavaScript系フレームワーク に関する知識があまりない人です。 UniversalとSPAの違いについてはいろんなサイトで解説されていますが、当初の僕は全く理解ができませんでした。 なので、「ベテランから初心者へ向けた解説」ではなく「初心者が初心者へ送るメモ書き」のような、ちょっと変わった切り口でお話したいと思います。 それ故に伝わりやすい部分もあると思っていますが、逆にいい加減な部分もきっと含んでいます。 しっかり理解したい人はもっと知識のある人の解説を読んでください。 なるべくいい加減にならないよう、具体例や根拠、実験結果とともに
Vue・Nuxtでslotの中身の有無で処理を分ける方法 【$scopedSlotsを使います】
2021/06/10 (更新日: 2022/11/01) Vue・Nuxtでslotの中身の有無で処理を分ける方法 【$scopedSlotsを使います】 JavaScript PROGRAMMING Vue VueやNuxtで、slotの利用時に、v-slotでslotの処理を複数に分けていて、slotが渡されていれば表示・slotが渡されていなければ非表示にするというような処理を書きたい時に使える便利な方法について解説します。 この記事を書いている僕は、フロントエンドのプログラマー(フリーランス)として、これまで4年ほどのWeb制作経験があり、Vue,React,Nuxtなどフロントエンドの開発を得意としています。 この記事を読むことによって、Vueのslotで中身の有無により処理を切り分けることができるようになります。 Vue・Nuxtでslotの中身の有無で処理を分ける方法 【$s
WP REST APIを元にNuxt.jsのgenerateで記事ページを自動生成してみる（いわゆる動的ルーティング） | ARAKAZE NOTE
せっかくREST APIの情報を元にページを作るならgenerateするファイルは自動で出力したいですよね。 公式ドキュメントのところでいう「動的ルーティング」を使って実現してみましょう。 うまくいけばREST APIを元に自動でディレクトリ構造やhtmlファイルが生成されます。 考え方 nuxt.config.jsにgenerateプロパティを記述、そこに使用するAPI情報を読み込む記述をします。 ここでは読み込んだjsonの配列の中にある、ディレクトリ構造を示す値をrouteに設定していきます。 次に自動生成されるページ用のテンプレートファイルを作成します。 ディレクトリに対して細かく設定することも出来ますがWPのパーマリンクを元にする事を考えると「pages/_.vue」というファイルを作ってしまうのが手っ取り早いかなと思います。 テンプレートファイルは頭文字にアンダースコアを付ける
The correct way to force Vue to re-render a component
Sometimes Vue's reactivity system isn't enough, and you just need to re-render a component. Or maybe you just want to blow away the current DOM and start over. So how do you get Vue to reload a component the right way? The best way to force Vue to re-render a component is to set a :key on the component. When you need the component to be re-rendered, you just change the value of the key and Vue wil
ポートフォリオサイトをNuxt + Netlifyに移行しました
2021年7月14日 Nuxt JS, Vue.js, Webサイト制作 WordPessで作成していた私のポートフォリオサイトをNuxt JSで作り変えてみました。デザインや内容はそのままで、管理体制を変えた感じですね。Nuxtに移行した理由や悩んだところをまとめてみます。 ↑私が10年以上利用している会計ソフト！ 移行を決めた理由 元々私のポートフォリオサイトは、まだ私が学生だった頃にWordPressの勉強用に作ったものです。その後何度かリデザインしながら公開していました。ブログなどはつけておらず、制作物の紹介を投稿記事として扱っていました。ただ、制作物は更新する頻度も高くはなく、WordPressでなくてもいい気がしてきていました。また、WordPressやPHPのバージョンを上げるたびにエラーを出すプラグインの対応に疲れてきていたところでした…。 そんな中出会ったのがGatsby
Native-Like Animations for Page Transitions on the Web | CSS-Tricks
Some of the most inspiring examples I’ve seen of front-end development have involved some sort of page transitions that look slick like they do in mobile apps. However, even though the imagination for these types of interactions seem to abound, their presence on actual sites that I visit do not. There are a number of ways to accomplish these types of movement! Here’s what we’ll be building: We’ll
ローカル環境で立ち上げているNuxt.jsの画面をスマホで確認する - みくろん備忘録
はじめに いつもローカル環境をスマホで確認するときに、 特に設定等をしていなかったのにNuxt.jsだとうまくいかなかった ローカル環境で立ち上げたNUxt.jsの画面をスマホで確認する方法 PCとスマホを同じwifiに接続する システム環境設定>ネットワークでIPアドレスを確認する ファイアウォールもオフに設定しておく ホスト名とポート番号を指定 package.jsonを編集 --hostname にはIPアドレスを入力、--portでは立ち上げたいポートを指定 "scripts": { "dev": "nuxt --hostname 192.168.000.001 --port 3000", あとは立ち上げるだけ npm run dev スマホでURLを入力 PCと同じwifiにつなげたスマホでURLを入力 http://192.168.000.001:3000 参考公式ドキュメント
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【Nuxt.js】vue-touch-eventsでタッチイベントを使おう | aLiz Nuxt
Wait for multiple images to load
Intersection Observer doesn't observe new elements