Vue.jsの基本記法をおさらいしつつ、Nuxt 3ならではの「useAsyncData」「useFetch」機能を試してみよう
本連載では、Webページのユーザーインタフェース（UI）構築に「Vue 3」を利用したフレームワーク「Nuxt 3」の活用方法を紹介します。前回は、Nuxt 3の概要、Nuxt 3プロジェクトの生成・実行、Nuxt 2のプロジェクトでNuxt 3の機能を利用するNuxt Bridgeを紹介しました。今回は、Vue.jsの基本記法を簡単に確認した後、Nuxt 3で利用できる「useAsyncData」「useFetch」機能を紹介します。 はじめに Nuxt.jsは、Webページのユーザーインタフェース（UI）を構築できるVue.jsとともに、様々な追加機能をまとめて提供するフレームワークです。現在次期バージョン「Nuxt 3」が開発中で、2022年4月にリリース候補（RC）版がリリースされました。 前回は導入編として、Nuxt 3の概要を説明するとともに、Nuxt 3プロジェクトを生成・実
Nuxt JSのコンテンツを多言語化する方法
2023年2月7日 JavaScript, Nuxt JS Nuxt JSで作成されたプロジェクトをi18nというプラグインを使って多言語化に対応する方法を紹介します。あまり実装する機会はないかと思いますが、自分用に備忘録として。自動的に翻訳してくれるわけではなく、言語ファイルを用意して切り替えるという仕様です。すでにNuxt JSでプロジェクトを作成していることを前提に書いていきます。 ↑私が10年以上利用している会計ソフト！ i18nをインストールする 公式サイトを参考に、yarn または npm でインストールします。 Yarn yarn add nuxt-i18n NPM npm i nuxt-i18n 言語ファイルを作成 今回は英語と日本語のWebサイトを作成していく手順を紹介します。プロジェクトの第一階層に「lang」フォルダーを作成し、その中に英語版を「en.js」、日本語版
「Nuxt.js」で作ったWebページをインターネットで公開する方法
本連載では、Webページのユーザーインタフェース（UI）フレームワーク「Vue.js」と、Vue.jsを利用してWebページを作成できるフレームワーク「Nuxt.js」の活用方法を、サンプルとともに紹介します。前回は、Nuxt.jsの非同期データ機能について説明しました。今回は、Nuxt.jsを利用して作成したWebページをインターネット上に公開する方法を紹介します。 はじめに Nuxt.jsは、Webページのユーザーインタフェース（UI）フレームワークであるVue.jsに、Webページの作成に必要なUI以外の追加機能をまとめて提供するフレームワークです。 Nuxt.jsでは、作成したWebページをインターネット上に公開するための機能が提供されています。この機能を利用すると、Node.jsが実行できないWebサーバー向けに静的ファイルを生成できます。また、Node.jsが実行できるWebサ
Vue.js、Nuxt JSを学習するときにやったこと
2021年7月11日 JavaScript, Nuxt JS, Vue.js 以前「WebデザイナーのためのVue.js事始め」という記事でVue.jsについて触れたのですが、それから今まで、どんな手順で勉強してきたのかを紹介してみます。途中ReactやGatsbyを取り入れたりもしていたのですが、結局 .vueファイルでの単一ファイルコンポーネントが楽だなーと思い、今はVue.jsに全振り中です。これから勉強してみたい方の参考になれば幸いです。 ↑私が10年以上利用している会計ソフト！ 1. Vue.js公式Webサイトを確認 まずはVue.jsの公式Webサイトを確認。日本語にも対応しています。ここで基本的な使い方、文法、何ができるのかなどをざっくり学習しました。 サンプルコードがある箇所は実際にCodePenを使ってコードを記述し、動作確認します。公式は今後何度も繰り返しチェックする
複数のページを切り替える、Nuxt.jsのルーティング機能を学ぼう
はじめに Nuxt.jsは、Webページのユーザーインタフェース（UI）フレームワークであるVue.jsに、Webページの作成に必要なUI以外の追加機能をまとめて提供するフレームワークです。 UIフレームワークを利用したWebページでは、複数のページをURLに関連付けて切り替える「ルーティング」の機能が必要になります。Nuxt.jsでは、内部的にVue.js公式のルーティングライブラリー「Vue Router」を利用しつつ、より直感的にルーティングを実装できる機能を提供しています。 本記事では、Nuxt.jsのルーティング機能を、サンプルを挙げて説明していきます。 対象読者 Nuxt.jsで複数ページを切り替えるWebページを作りたい方 Vue.jsのルーティングをよりシンプルに利用したい方 Webページの画面切り替えにアニメーション効果を入れたい方 必要な環境 本記事のサンプルコードは、
「Nuxt.js」の基本、「Vue.js」の利用方法を知ろう
本連載では、Webページのユーザーインタフェース（UI）フレームワーク「Vue.js」と、Vue.jsを利用してWebページを作成できるフレームワーク「Nuxt.js」の活用方法を、サンプルとともに紹介します。前回はVue.jsとNuxt.jsの概要を説明しました。今回はNuxt.jsでUI構築に利用するVue.jsについて、基本的な利用方法を説明します。 はじめに Nuxt.jsは、Webページのユーザーインタフェース（UI）フレームワークであるVue.jsに、Webページの作成に必要なUI以外の機能を追加して、まとめて提供するフレームワークです。そのため、Nuxt.jsの機能を使いこなすためには、まずVue.jsの利用方法を知っておく必要があります。 Vue.jsでは、データとWebページの表示を関連付けるデータバインディングやイベント処理、条件分岐や繰り返しなど、動的なWebページを
Nuxt.jsでWebサイト制作 [1] 導入編 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。フロントエンドエンジニアのつっちーです。 これまで4回にわたってVue.jsについて取り上げましたが、今回からはVue.jsを利用したフレームワーク、Nuxt.jsについて書いていきたいと思います。 第1回目は、Nuxt.jsがどのようなフレームワークであるか確認したあと、実際に動作させることでその機能を体験してみましょう。 このシリーズでは、「Nuxt.jsをWebサイト制作に活用できる状態までいち早く到達すること」を目的に進めていきます。ドキュメントとしては、もちろん公式がもっとも詳細です。日本語化もされていますので、そちらも合わせてご参照ください。 Nuxt.jsとは Nuxt.jsを短く言いあらわすと、Vue.jsアプリケーションを静的に生成することができるフレームワークです。 このフレームワークは、Vue.jsアプリケーションの構築に必要とされるさまざまな機能が束にな
![Nuxt.jsでWebサイト制作 [1] 導入編 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作](https://cdn-ak-scissors.b.st-hatena.com/image/square/94dfd95d7aaa9abf96f8b3fc9dc22a0b97803c1b/height=288;version=1;width=512/https%3A%2F%2Fliginc.co.jp%2Fwp-content%2Fuploads%2F2018%2F08%2Fec_180823_01_m.jpg)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
