Nextでも！Nuxtでも！Viewport Extraで手軽に縮小表示 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ エンジニアのつっちーです。 突然ですが、フレームワークって便利ですよね。色々ありますが、JavaScriptだと今はNextやNuxtでしょうか（2022年3月時点）。私もこの2つにはどっぷりハマっており、楽しく便利に使わせてもらっています。自身に限らず、様々なところで採用事例を見かけるため、かなりスタンダードな選択肢となっているように感じます。 さて、小さい端末やiPadでの縮小表示に便利なライブラリViewport Extraですが、引き続きたくさんご利用いただいています。今後もまだまだ使ってもらいたい。そのためには、Next/Nuxtと一緒に動作することが求められると考えました。もちろん可能ですが、すこし工夫が必要……ということで、今回はこれらを併用する方法を紹介します。 Viewport Extraの説明についてはこちらの記事をご覧ください。
PurgeCSSを使用して、CSSファイルから未使用のスタイルを削除する方法
PurgeCSSを使用して、CSSファイルからWebページやアプリで未使用のスタイルを削除する方法を紹介します。 特にCSSフレームワークやライブラリを使用している時は、すべてのスタイルを使うことはないと思うので、劇的な効果があります。 How to Remove Unused CSS by Luca Spezzano 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに PurgeCSSとは ビルドツール JavaScriptフレームワーク PurgeCSSの使い方 PurgeCSSをgulpで実装する方法 PurgeCSSをNuxt.jsで実装する方法 はじめに PurgeCSSを使用すると、制作のワークフローに取り入れてCSSファイルを60%以上削減できます。 未使用のCSSを削減しよう 私はしばらくの間、CSSファイ
nuxt.js(v2)でgenerate納品する前にやっておきたい設定 - Qiita
Nuxt.js(v2)でgenerate納品する前にやっておきたい設定 Nuxt(v3)版書きました。 リリース情報確認URL Nuxt.jsのリリースノート create-nuxt-appのリリースノート node.jsのリリースノート VScodeのアップデート情報 動作確認済みバージョン Node.js(v14.8.0) npm(v6.14.7) Nuxt.js(2.14.4) create-nuxt-app(v3.2.0) macOS Catalina(v10.15.6) terminal(zsh) VScode(v1.48.2) 更新履歴 2020/9/1 nuxt.js(v2.13)から、generateプロパティーにroutesを設定しなくても大丈夫なようになっていたので該当箇所を削除。 2020/8/29 create-nuxt-app(v3.2.0)用にリライトしました。
【Ch.1】 Nuxt とは？動かして理解する【Nuxt de Portfolio】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、フロントエンドエンジニアのライダーです。 今回は「Nuxt de Portfolio」連載のチャプター1となります。 Nuxtとは？ Nuxt は、平たくいうと 2017年以降、爆発的に人気のでた、 WebサイトやWebサービスの開発に使われる、 Vue によるフロントエンド開発環境を束ねた、 コンポーネント志向のフレームワーク です。 公式ドキュメントは日本語に翻訳されたものが公開されていますので、一度目を通してみてください。 Nuxt ドキュメント：https://ja.nuxtjs.org/ Vue ドキュメント：https://jp.vuejs.org/v2/guide/ 実際に動かしてみる npx create-nuxt-app my-portfolio-sample このコマンドが、Nuxt プロジェクトの環境構築コマンドです。 これを実行してしばらくするといくつか
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系の記事
はじめてSPAのフロントエンドを担当することになった僕がワクワクしながら考えた構成について | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
そんなおりに舞い込んだ待望のWebサービスの案件がありました。しかもシングルページアプリケーション。S.P.A！ S.P.A！ いままでSPA案件なんてやったことなかったし、やってみたかったしで、恐怖と歓喜の入り混じったゾワゾワとした感覚につつまれました。 ってことで、今回はいろいろと考えて準備した構成をご紹介します。 使用するフレームワークなど 世の中の流行りと僕の趣味で選びました。 Nuxt（フレームワーク） Pug（テンプレートエンジン） Stylus（CSSプリプロセッサ） ESLint（JavaScript静的検証） Prettier（自動整形） Stylus Supremacy（Stylus自動整形） Jest（ユニットテスト） Storybook for Vue（コンポーネント） Nuxt（フレームワーク） 言わずと知れた、巷でも話題のアプリケーションを作成するためのフレーム
Nuxtに「serverMiddleware」を設定して、API サーバ的な動きをさせてみた | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、フロントエンドエンジニアのライダーです。 2018年秋、Nuxt 2がリリースされましたね。しかも、イベント中のライブリリースだったとのこと。公式のTwitterアカウントに発表の様子がアップされていました。 Live releasing of Nuxt.js 2.0 at @vue_london 💪🏻 pic.twitter.com/jhasarJkvo — Nuxt.js (@nuxt_js) 2018年9月21日 すごい……。 さて今回は、そんなNuxtのserverMiddlewareを使った、API サーバっぽいものの設定をご紹介します。 Nuxtの「serverMiddleware」とは? 公式Docs：https://ja.nuxtjs.org/api/configuration-servermiddleware/ serverMiddlewareでは、 Nu
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
