Vue 3

【Vue.js】Histoire 設定のつまずきポイント & 対処方法！ はじめに 前提 npm run story:build が code: 'PLUGIN_ERROR', plugin: 'commonjs--resolver' で失敗する Before (例) After (例) npm run story:build の成果物が見当たらない npm run story:preview で URL に謎の . が入る npm run story:dev で 画像や fontawesome のアイコンが表示されない npm run story:preview で画像が表示されない npm…

Introduction 私は長年にわたりReactおよびNext.jsを用いた開発に従事してきましたが、最近、フロントエンド開発の大部分がVueで行われているVisasqに入社しました。 入社後、まずVue 2からVue 3への移行プロジェクトに携わり、現在はVue 3とNuxt 3（最近Nuxt 4へアップグレード）を用いたチームに所属しています。この一連の移行経験は、実際のプロジェクトを通じて両フレームワークを比較するよい機会となりました。 Reactの柔軟かつ自由度の高いエコシステムから、Vueのより構造化された環境へと移行したことで、開発体験における多くの発見がありました。また、この…

導入 株式会社インゲージにてPD部に所属しております、fujimmm331です。 最近また卓球熱が再燃してきています。 そんなことはさておき。 UIコンポーネントを設計する際、再利用性と柔軟性のバランスを取ることは非常に重要ですよね。 例えば、サイト全体で統一されたモーダルやカードコンポーネントを作成したい場合、デザインの共通部分（ヘッダー、フッター、背景など）は再利用しつつ、 その内部に表示するコンテンツは個々のケースに合わせて変えたい、というニーズが頻繁に発生するのではないでしょうか。 ここで活躍するのがslotです。 slotは、コンポーネントの内部に外部から任意のコンテンツを挿入するた…

📝 Nuxt 3 入門：Vue 開発をもっと快適にする次世代フレームワーク はじめに Vue.js を使った開発において、よりスケーラブルで柔軟な構成を求めるなら Nuxt 3 は外せません。この記事では、Nuxt 3 の特徴や導入方法、実際に使ってみて感じたメリット・注意点を紹介します。 🚀 Nuxt 3 とは？ Nuxt 3 は Vue 3 をベースにしたフルスタックフレームワークで、以下のような特徴があります： Vue 3 + Vite に完全対応：高速な開発体験 サーバーサイドレンダリング（SSR）と静的サイト生成（SSG）を両立 TypeScript サポートが標準 Composab…

こんにちはです。あっちのそららです。最近勉強しているTypeScriptのアウトプットとして、デジタル時計を作ってみました。 デモページ acchinosorara.github.io「Vue.js」というフレームワークを使用。ディスプレイの文字がリアルタイムで更新される、ありきたりな時計です。 文字のデザイン カクカクしたデジタル時計らしさを出すため、文字はCSSでデザインしました。 参考記事 ja.wikipedia.org HTMLで各セグメントを生成し、A～Gの連番を振って配置しました。数字に応じて個々の表示・非表示が切り替わる仕組みです。例えば、 「2」→ C、Fを非表示 「4」→ …

昨日、Vue.jsのコンポーネント依存関係を可視化するツール「Voyager」の開発をし始めました。 このツールは、Vue.jsプロジェクトのコンポーネント間の関係性を簡単に、インタラクティブに表示することを目指しています。 CodePenで動作確認できるようにしています。 codepen.io このサンプルは、vue-element-adminに対して実行した場合の結果になります。 なぜ作り始めたのか？ 大規模なVue.jsアプリケーションを開発していると、コンポーネント間の依存関係が複雑になってきます。 新しいメンバーがプロジェクトに参加した時や、リファクタリングを行う際に、この依存関係を…

かれこれ5年来くらいの Spotify 有料ユーザです。さて、Spotify でディグった知らない音楽が良かったとき、メモったり SNS に流したりしようとしてアプリから曲名やアーティスト名等のテキストをコピペするのって、けっこう面倒じゃないですか？そんなフラストレーションが積もり積もって Spotify API 経由でアルバム情報を取り寄せて表示するだけのウェブアプリ作ってみたです。設計・実装面での概要はこんな感じ。 Vue3 + Tailwind CSS + daisyUI で開発。バックエンド不要のフロントエンド 100% な SPA。 Spotify API の認証認可は、OAuth2…