Nuxt.jsのベストプラクティスを考えてみる.pdfFrom Spring Boot 2 to Spring Boot 3 with Java 21 and Jakarta EE
Gridsomeを試してみる - Qiita
Gridsomeって何ぞや GridsomeはReact製の静的サイトジェネレータのGatsbyを参考に作られた、Vue.jsの静的サイトジェネレータ。今までだとNuxt.jsのgenerateを使うことが多かったけど、今後Gridsomeも台頭してくるかもなということで、書いてみました。ちなみに、ロゴがめっちゃGraphQLを意識してるよね。 概要 Gridsomeは2018/12/03現在ver0.3.4で絶賛ver1.0に向けて開発中。今のところこんな感じで、実用的なプロダクトを作るにはまだ機能が足りていない部分もあるので、ぶっちゃけまだNuxt.js使うしかないって感じ。 ビルドコマンドを走らせたタイミングでGraphQLでデータを取得して、静的サイトを書き出してくれる。運用するときには、CMSの更新に同期してbuildコマンドが走るようにすることになる。 Gridsomeの大きな
Nuxt.jsのPWAモジュールは何をやっているのか
2019年6月19日に行われたPWA Night vol.5で使用したスライドです。 リンク Nuxt.js : https://nuxtjs.org/ タムテブ : https://tamutebu-arabaki2019.firebaseapp.com/ タップ10 : https://tap10s.web.app/ Nuxt PWA : https://pwa.nuxtjs.org/ Workbox : https://developers.google.com/web/tools/workbox/ Workboxモジュールのドキュメント : https://pwa.nuxtjs.org/modules/workbox.html 【Nuxt.js】pwa-module v3におけるpreCacheの仕様変更 : https://qiita.com/gyarasu/items/1529
【Nuxt.js】pwa-module v3におけるpreCacheの仕様変更 - Qiita
tl;dr Nuxt.js向けのPWAモジュール（pwa-module）がv3ベータになったタイミングでpreCacheのデフォルトの挙動が変わった v2までは、NuxtのバンドルファイルがService WorkerのpreCache対象になっていたが、デフォルトで入らなくなった preCacheするファイルは自身で指定する必要がある 基本的にはstatic配下の静的アセットを指定することになる Nuxtのバンドルファイルはページ表示時に使用しているもののみruntimeCacheされる v2までのpreCacheの挙動 pwa-moduleを有効化すると、Service Workerのスクリプト（sw.js）が自動生成されるようになります。 v2まではNuxtのバンドルファイルがpreCacheされるようにsw.js内に追加されていました。 下記はv2.6.0を導入して出力されたsw.
Nuxt.jsでページ内の日本語だけでWebフォントのサブセットを作成したい（静的サイトの話） - Qiita
きっかけ 「JavaScriptのイベントをたくさん見られるサイト」というWebサイトをNuxt.jsで作成した際に、明朝のWebフォントを使ったのですが、どうせ静的サイトで使う文字が決まっているわけだから容量を軽くできないかな、と思ったのがきっかけです。 フォント/形式/ツールの選定 前提として、日本語のWebフォントは控えめに言ってクソ重いので、使わないに越したことはありません。どうしても使いたいのであれば、できる限り容量を減らすよう努力する必要があります。 一番手っ取り早いのはお金を払ってFONTPLUSやTypeSquareなどのサービスを使うことです。たいていのサービスでは動的にサブセットを生成してくれるので、容量を抑えられます。最近ではGoogle Fontsにも日本語のWebフォントがあるので、こちらも有力な選択肢になるかもしれません。@font-faceのunicode-r
【v2対応】Nuxt.jsとFirebaseを組み合わせて爆速でWebアプリケーションを構築する - Qiita
Firebase Advent Calendar 2017 21日目の記事です。 フリーランスでフロントエンドを中心にエンジニアをやっているpotato4dです。 普段はVue.jsを中心に、案件を進めたりコミュニティに関わったりしていますが、今回はそんなVue界隈で今アツいフレームワークであるNuxt.jsとFirebaseを組み合わせて、SPA + SSRにAuthと Firestore を組み合わせたアプリケーションを高速で作る方法を、サンプルとあわせてご紹介します。 2019/10/16 追記 このサンプルは Firestore が存在しない Nuxt v1.x + RTDB 時代のコードを愚直に移行している ので全体的に資料が古くなっています。 インフラ構成については順次更新していますが、特にデータストア操作周りについては できるだけ参考にしないでください。 2019/07/02
Nuxt.jsでimgタグのsrc属性をバインディングする時にちょっと困った - Qiita
<template> <img :src="imgUrl"> </template> <script> export default { data () { return { imgUrl: "~/assets/hoge.png" } } } </script> ページ上では <img src="~/assets/hoge.png"> と出力されるのだが、画像は表示してくれない。 解決法 https://ja.nuxtjs.org/guide/assets/ 上記公式サイトによるとnuxtではこうコンパイルされるらしい というわけで、こう書いたらちゃんと表示されました。 <template> <img :src="img"> </template> <script> // 開発時はimage loaderでblobにして読み込む。本番時には設定で良い感じにurlになったりする。 impor
Vue.jsとNuxt.jsを使っていて、どっちのドキュメントを見ればいいんだ？ってなったときのために機能を整理する。
Vue.jsとNuxt.jsを使っていて、どっちのドキュメントを見ればいいんだ？ってなったときのために機能を整理する。 開発に慣れてきたら迷うことはないと思いますが、Vue.jsをさわるのが初めてでNuxt.jsを採用した場合、どっちのドキュメントを見ればよいかわからずに、さまよってしまう事があるかもしれません（自分がそうでした）。そんなときのための、長ったらしいメモです。 この記事を書いている時点では、Vue.jsが2.5、Nuxt.jsが1.2です。 ドキュメントの歩き方 まずはガイドで概要を把握して、細かいことが気になったらAPIをあたります。 Vue.jsでの開発がはじめてであれば、本格的に書き始める前に、スタイルガイドを見ておくと、手戻りが少なくなるかもしれません。 ガイド フレームワークの使い方がわかりやすく書かれています。 はじめにから順に読んでいって、大体こんなことができる
Nuxt.jsいらない説 - GAミント至上主義
Vue使うなら最初からNuxt.js使えよ、という条件反射みたいな風潮にちょっと反論してみる。 ※2020/7/6 追記 NuxtJSが必要な状況になって使ったときの感想などはこちら uyamazak.hatenablog.com ※2018/9/4 追記 1にviewsフォルダ等について追記 またこの記事はNuxtにしようかなと思っていたところでVue CLI3を使って感動し、今も使っていないのでその持論でもあります。 Vue-CLI3に関するVue開発者Evan Youの記事の和訳がきました jp.vuejs.org ※2019/2/19 追記 SSRのところにOGPについて追記 ※追記ここまで 概論 まずVue CLI 3で始めた方がいい。 最初から大人数で大きなアプリを作るつもりだったり、SSRが必要だったらNuxtでいいかも。 私がNuxtを使わない理由３つ 1. Vue CLI
クライアントサイドのモデルとは何か 前編 ~ クライアントサイド MVC の死 - mizchi's blog
前置き この記事、本来は Flux には Model がないのではないかと思った覚書 - ナカザンドットネット と Flux の Store が ViewModel かって話からの MVW とかどうでもいいって話 - 猫型の蓄音機は 1 分間に 45 回にゃあと鳴く のアンサーとして書き始めた記事だが、前置きだけで別テーマとなったので、前後編に分割する。 僕は元々がゲームクライアント屋だったときの発想を引きずってるのと、既存の Web の開発の文脈に対して距離を置いていることを明言しておく。あとこういうテーマでとある原稿書いていたので、頭の整理も兼ねて。 ActiveRecord の功罪を振り返る このテーマを語るにあたって、まず Rails の MVC について述べなければならない。なぜなら、フロントエンドのアーキテクチャとは、サーバーサイドの MVC の模倣に始まり、破綻し、結果として
Nuxt.jsにBulmaを組み込んだら、Vuexストアが理解できた件 - Qiita
はじめに 今流行りのJSフレームワークであるNuxt.js（ベースはVue.js）に、これまた今流行りのUIフレームワークであるBulmaを組み込む方法を試していたら、今までどんなに勉強してもイマイチよくわからなかったVuexストアの役割がストンと腑に落ちたというアハ体験をしましたので、みなさんと共有したいと思います 前提条件 macOS High Sierra v10.13.3 node.js v9.7.1 npm v5.7.1 yarn v1.5.1 node.js以下については、Homebrewを使ってインストールしました 新規プロジェクトを生成する create-nuxt-appコマンドを使います プロジェクト名はavocadoとします。特に意味はありません # これは以下のコマンド2つと同じ意味です yarn create nuxt-app avocado # 1/2 creat
Nuxt.js 1.0 is out 🎉
It has been a long run, with a lot of commits, issues, contributors & fun! See 1.0.0 Release Note on GitHub. Nuxt.js is a framework on top of Vue.js, vue-router, vuex and vue-meta. You can create a (static generated or universal or single page) web app quickly with the same setup and no build config to write. TLDR:Nuxt 1.0.0 is out, up to date with the lastest versions of Vue, vue-router, vuex and
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
create-nuxt-app で選べる現代の UI フレームワーク / Modern UI Frameworks
Nuxt, ElementUI, Storybook 構成のVueプロジェクトの始め方 - Qiita
「結局Nuxt.jsって何がいいの？」に対する回答 by potato4d
Vue Fes Japan 2018 サイトの速度改善 / High Performance Vue Fes Japan Site
https://kapi-travel.com/programing/nuxt-js-x-firebase%E3%81%A7pwa%E3%82%A2%E3%83%97%E3%83%AA%E3%82%92%E5%85%AC%E9%96%8B%E3%81%99%E3%82%8B/
Nuxt.jsとFirebaseでSPA×SSR×PWA×サーバーレスを実現する - DMM inside
Nuxt.js でつくるアプリケーションの設計 / Architecture of nuxt application
Nuxt.js で作った静的サイトを PWA 化する - Qiita
