Nuxt.jsで参考になりそうな事例や実装例を調べてみた - りまりまだんの本拠地
こんにちは。りまりま団のもふもふです。これはNuxt.js Advent Calendar 2018の17日目の記事です。 本当はVue.jsのKUSOアプリをNuxt.jsに書き換えて比較しようと思っていたのですが、スマブラで全キャラクターを出すのに注力しすぎたコミックマーケットの原稿で力尽きたため、予定を変更してお送りします。 なぜこのエントリを書くのかというと、Nuxt.jsはVue.js以上に実装例が少なく、いざプロジェクトを作成しよう！というときに色々参考にできるものがあると嬉しいなと思ったからです。特にディレクトリ構成は気になりますよね。Nuxt.jsはディレクトリ構成を参照してルーティングを行なってくれるためです。 実装例 hackernews github.com ニュースサイトをNuxt.jsで実装したリポジトリです。リンクから実際のサイトを見ることもできます。 nuep
拝啓 Google様、JavaScriptとJSONで動的に変化するページをインデックスしてください - Qiita
今回のお悩み 「Google様に、Webページ「A.html」をインデックスしてもらいたい」 そう、Webサイトを作るすべての人たちの願いだよね。 ーー さて、今回インデックスしてもらいたいWebページ「A.html」はURLパラメータに応じて内容が変化するページである。 JavaScriptにより、URLパラメータに対応するデータを「data.json」から取得、レンダリングするというものだ（URLパラメータは「A.html?id=XX」と記述し、今回はid=1〜3まで存在するという設定）。 インデックスにはパラメータ別で登録したい。 つまり、id=1〜3の3ページ分を別々に登録する。 また、ページのタイトルやディスクリプションについても、パラメータごとに設定したものを検索結果に表示させたい。 最近のクローラーはJavaScriptでの処理も認識するとのことだが、果たして結果はー。 <!
Webサイト制作のチュートリアル連載「Nuxt de Portfolio（全５回）」を始めます！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、フロントエンドエンジニアのライダーです。 2018年 秋に Nuxt v2 がリリースされたこともあり Nuxt.js（以降、Nuxt） が人気を博しています。これまで興味がなかったあなたも、その人気ぶりから少し Nuxt への興味が湧いてきたころではないでしょうか？ LIGにも着実にその流れはきており、シングルページアプリケーション（以降、SPA）やそのサーバサイドレンダリング（以降、SSR）以外のWebサイトでも、Nuxt を導入して快適コーディングする事例が増えてまいりました。 そこで今回から「ポートフォリオサイトの作成」を題材に、Nuxt を使ったWebサイト制作をチュートリアル式に進めていきたいと思います。 本連載「Nuxt de Portfolio」の目的 冒頭でも話しましたが、いま日本で、Nuxt はどんどん広まってきており、ドキュメントも充実し、Tips系の記事
SCOUTER開発者ブログ
2024-04-29 CSSってどんな勉強をしたらいいの？おすすめの勉強法3選！ 文字やタブなどWebサイトのデザインを作成するマークアップ言語がCSSです。 CSSを勉強すると、おしゃれなWebサイトやかっこいいWebサイトが作れるようになります。 また、Webサイトを作るときに必要なHTMLを理解するのにも役立ちます。 CSSを勉強するならできるだけ効率よく勉強できるようになりたいですよね。 ではCSSの勉強法はどのようなものがあるのでしょうか。 CSSの勉強法は、スクール […] 2024-04-29 WEBエンジニアから見たXserverの使い勝手と評判 レンタルサーバーのおすすめサイトを見ると、大体どこでも上がってくる有料のレンタルサーバーの一つに「Xserver」があります。 このXserverとは、どのようなサーバーで、サービスにはどのようなものがあるのか。 ホームページ関連
《Nuxt.js》アトミックデザインの静的サイトを構築するために必要な小粒なTipsまとめ。 - Qiita
Nuxt.js は SSR(サーバーサイドレンダリング)や SPA の Vue.js サイトを簡単に作成するためのフレームワークです。Nuxt は非同期データ、ミドルウェア、ルーティングなどを管理するために必要な環境を提供してくれます。Angular Universal、Next.jsと同様の位置付けです。 Nuxt のいいところ Nuxt はVue / Vue-Router / Vue-Meta / Vuex をインクルードしているので、SSR/SPA開発をするために必要なものをインクルード/設定する手間を省けます。 というような感じで、巷では高度なSSR/SPAを簡単に実装できる、という特徴が語られますが、nuxt は静的なウェブサイト構築にもすごく有能です。generateコマンドでの静的Webサイトの生成で、Jekyllなどの静的サイト生成ツールの機能があり、アトミックデザインで語
Vue.jsとNuxt.jsを使っていて、どっちのドキュメントを見ればいいんだ？ってなったときのために機能を整理する。
Vue.jsとNuxt.jsを使っていて、どっちのドキュメントを見ればいいんだ？ってなったときのために機能を整理する。 開発に慣れてきたら迷うことはないと思いますが、Vue.jsをさわるのが初めてでNuxt.jsを採用した場合、どっちのドキュメントを見ればよいかわからずに、さまよってしまう事があるかもしれません（自分がそうでした）。そんなときのための、長ったらしいメモです。 この記事を書いている時点では、Vue.jsが2.5、Nuxt.jsが1.2です。 ドキュメントの歩き方 まずはガイドで概要を把握して、細かいことが気になったらAPIをあたります。 Vue.jsでの開発がはじめてであれば、本格的に書き始める前に、スタイルガイドを見ておくと、手戻りが少なくなるかもしれません。 ガイド フレームワークの使い方がわかりやすく書かれています。 はじめにから順に読んでいって、大体こんなことができる
2019年の静的サイト制作はGulpではなくNuxt。
長らくGulpスターターキットで静的サイトの受託開発を行ってきたが、Nuxtに切り替えたのでその経緯。 Demo GitHub Nuxtの恩恵 平たくいうとGulp構築のめんどさから解放され、個人、チーム単位の環境差分に悩まなくて良くなる。コマンド一発でモダンな開発環境が整備され、ただちに開発を始めることができる。NuxtはVueのWrapperなのでVueでUI設計が可能。例えばAdobe Max の公式サイトはNuxtで作られている。 要点 Gulpの問題点 個人、チーム単位での属人化 開発環境構築で工数を要する 構成によっては重い ファイルツリーの属人化 Nuxtの利点 開発環境の平準化（非属人化） 必要機能が初期装備で備わっている（監視、minify、ローカルサーバー） ES6~ コマンド一発で環境構築完了 ファイル構成の雛形化 特筆すべき点 主要なライブラリが揃っている あれやり
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
