ドットインストール - 3分動画でマスターできるプログラミング学習サービス
レッスン一覧
料金プラン
レッスン一覧
料金プラン
ログイン
運営からのお知らせ
2025/08/28
NEW
【週刊ドットインストール】 Figma入門を制作中、256timesの新クラスを企画中
PREMIUM
Nuxt入門 実践編
Vue.jsのフレームワークであるNuxtの実践的な使い方について見ていきます。
0%
このレッスンをはじめる前に
このレッスンを進めるには前提知識が必要です。先に以下のレッスンを完了しておきましょう。
Vue.js 3入門 基礎編
(全15回)
PREMIUM
PREMIUM
0%
Vue.js 3入門 応用編
(全13回)
PREMIUM
PREMIUM
0%
Vue.js 3でTodo管理アプリを作ろう 基本機能編
(全12回)
PREMIUM
PREMIUM
0%
Vue.js 3でTodo管理アプリを作ろう 応用機能編
(全17回)
PREMIUM
PREMIUM
0%
Nuxt入門 基礎編
(全12回)
PREMIUM
PREMIUM
0%
動画レッスン一覧
(14)
#01 ECサイトをNuxtに組み込んでいこう
(01:50)
無料公開中
実践編の概要
開発環境の確認
Nuxtに組み込むサイトの確認
未完了
#02 サイト全体のスタイルを移植していこう
(02:45)
無料公開中
サイトのソースコードを確認
titleタグの移植
共通のスタイルの移植
未完了
#03 containerのスタイルを移植していこう
(01:08)
無料公開中
containerの設置
スタイルの設定
未完了
#04 Headerを組み込んでいこう
(01:40)
Header.vueの編集
NuxtLinkの設定
未完了
#05 Footerを組み込んでいこう
(01:15)
Footer.vueの編集
スタイルの移植
未完了
#06 商品を表示してみよう
(01:41)
商品関連コードの移植
スタイルの移植
未完了
#07 もっと商品を増やしてみよう
(02:55)
productsの宣言
v-forによるli要素の生成
未完了
#08 商品データを整備していこう
(02:39)
toLocaleString()の活用
key属性の付与
データの整備
未完了
#09 商品の詳細ページを作ろう
(02:57)
products/0.vueの作成
商品データの埋め込み
未完了
#10 ダイナミックルーティングを使ってみよう
(03:00)
ダイナミックルーティング
NuxtLinkの設定
未完了
#11 useState()でデータを管理していこう
(02:18)
useState()の設定
useState()で設定した値を使う方法
未完了
#12 useState()でデータを取得してみよう
(02:22)
useState()による値の取得
useRoute()によるURL情報の取得
idの取得
未完了
#13 商品データを取得しよう
(02:12)
find()
Number()
.valueに関する注意点
未完了
#14 サイトを完成させよう
(02:35)
商品データの整備
商品データの埋め込み
未完了
リリース情報(note)
『Nuxt入門 実践編』をリリースしました
詳細情報
最終更新日
2025年4月5日
バージョン情報
Nuxt 3.15.4