Nuxt3のリリースが待ち切れない！ベータ版を使ってToDoリストを作ってみた | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、エンジニアのザワです。 Go言語でAPIを作ってみたかったので、前回は手っ取り早く作れるアプリケーションとしてToDoリストを作ってみました。 執筆時点ではまだベータ版であるNuxt3をどうしても使ってみたいので、今回はToDoリスト制作を通してNuxt3の一部機能を試したいと思います。 Nuxt3のロードマップを見ると、2022年6月に安定板がリリースされる予定になっています。 今回もミニマムな要件で作りきることを目標にして、データの永続化はせず、見た目を作っていきます。少ない手間でスタイリングしていくために、UIフレームワークであるVuetifyを使います。 それではNuxt3、Vuetifyのインストールから始めます。 環境・バージョン情報 使用した環境とバージョン情報は以下の通りです。 Node.js(v16.14.0) Nuxt(3.0.0-27465767.70f0
Nextでも！Nuxtでも！Viewport Extraで手軽に縮小表示 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ エンジニアのつっちーです。 突然ですが、フレームワークって便利ですよね。色々ありますが、JavaScriptだと今はNextやNuxtでしょうか（2022年3月時点）。私もこの2つにはどっぷりハマっており、楽しく便利に使わせてもらっています。自身に限らず、様々なところで採用事例を見かけるため、かなりスタンダードな選択肢となっているように感じます。 さて、小さい端末やiPadでの縮小表示に便利なライブラリViewport Extraですが、引き続きたくさんご利用いただいています。今後もまだまだ使ってもらいたい。そのためには、Next/Nuxtと一緒に動作することが求められると考えました。もちろん可能ですが、すこし工夫が必要……ということで、今回はこれらを併用する方法を紹介します。 Viewport Extraの説明についてはこちらの記事をご覧ください。
Nuxt.js で Markdown ベースのブログを構築する（Markdown 編） - jmblog.jp
この記事は「Nuxt.js で Markdown ベースのブログを構築する」シリーズの一部です。 Nuxt.js で Markdown ベースのブログを構築する（Markdown 編） ← ここ Nuxt.js で Markdown ベースのブログを構築する（Nuxt.js 編） Nuxt.js で Markdown ベースのブログを構築する（サイトパフォーマンス編） 本ブログは、 Markdown で記事を書き、 Nuxt.js の静的ファイル生成機能を使って静的ファイルを書き出し、 Netlify を使ってホスティングする というシステム構成になっている。具体的にどのようにしているか簡単に紹介する。 processmd を使った Markdown ファイルの変換処理 それぞれのブログ記事は YYYY-MM-DD-xxxxx.md という Markdown ファイルに書いている。ファイル
API通信一切なし！Nuxt Composition APIで作る完全静的サイト - ICS MEDIA
Vue.jsにはOption APIやClass方式があり、Vue.jsバージョン3からはComposition APIも増え、さまざまな作り方があります。Vue.jsを基礎としているフレームワーク、Nuxt.jsも同様にNuxt Composition APIとしてNuxt.js用に拡張されたものがリリースされています。 さらにNuxt.jsには静的サイトジェネレートという強力な機能があります。Nuxtの静的化のための機能はOption APIで提供されていましたが、Composition APIでの使い方はあまり解説記事がありません。本記事ではNuxt Composition APIを使って静的サイトを生成する方法を解説します。 下記は実際にNuxt Composition APIで静的化したものと、非同期処理を比べたデモです。 サンプルを別ウィンドウで開く コードを確認する Nuxt
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を使ってコードを記述し、動作確認します。公式は今後何度も繰り返しチェックする
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ページを開く
