並び順

ブックマーク数

期間指定

  • から
  • まで

1 - 40 件 / 993件

新着順 人気順

vue.jsの検索結果1 - 40 件 / 993件

  • ViteでVueコンポーネントテスト用のカスタム属性を削除する

    はじめに お久しぶりです、からころです。 突然ですが、みなさん Vite は利用してますか? Vitest や Jest をはじめ、Vueでコンポーネントのテストをする際に、 しばしばテスト用にカスタム属性を用意することがあります。 テスト属性がバンドルされてプロダクション環境に出てくると、 意図しない挙動を引き起こしたりするかもしれないから避けたい! そもそもテストタグを追加するだけなのにビルド後のコードに変更が加わるのは気持ち悪い! といった方に向けた記事になります。 設定について nuxt.config.tsの場合 { ... // 下記を追加する vue: { compilerOptions: { nodeTransforms: [ (node) => { if (node.type === 1 /* NodeTypes.ELEMENT */) { for (let i = 0;

      ViteでVueコンポーネントテスト用のカスタム属性を削除する
    • Vue Vaporモード近況 | gihyo.jp

      本連載では分散型マイクロブログ用ソフトウェアMisskeyの開発に関する紹介と、関連するWeb技術について解説を行っています。 今回は、MisskeyでUIフレームワークとして採用している、Vueの実験的な脱仮想DOM実装であるVaporモードの開発状況を紹介します。 仮想DOMとは 今日、一般的なWebのUIフレームワークでは仮想DOM(Virtual DOM, VDOM)と呼ばれる技術を採用していることが多いです。 Webでは、JavaScriptからHTMLを操作するためのインターフェイスとしてDOMが用意されていますが、仮想DOMを採用するフレームワークではこのDOMを直接操作するのではなく、一旦独自に仮となるDOM(V-tree)をメモリ上に構築し、操作する必要のあるHTML要素を特定して効率的にDOMを変更(patch)します。 しかし、UIが複雑になってくると仮想DOMも大き

        Vue Vaporモード近況 | gihyo.jp
      • 静的サイトジェネレーター「VitePress 1.0」正式リリース。VueとViteを採用し、高速なWebサイトを構築

        静的サイトジェネレーター「VitePress 1.0」が正式リリースされた。UIフレームワークのVueと高速なバンドラであるViteを基盤に、MarkdownのコンテンツからSPAなWebサイトを構築できる。 オープンソースとして開発されている静的サイトジェネレーターの「VitePress 1.0」正式版がリリースされました。 VitePressは、Markdownで記述されたコンテンツを静的で美しい外見を持つWebサイトへと高速に変換する機能を備えたフレームワークです。 デフォルトでテクニカルドキュメントに適したテーマが用意されており、すでにVite、Rollup、Pinia、VueUse、Vitest、D3、UnoCSS、IconifyなどのWebサイトのドキュメント部分に使われているとのことです。 VitePressは、同じく静的サイトジェネレーターである「VuePress」のモダン

          静的サイトジェネレーター「VitePress 1.0」正式リリース。VueとViteを採用し、高速なWebサイトを構築
        • First-class Vue support with Volar and Storybook 8

          💡Summary: Storybook 8 integrates Vue’s official language tools to improve how Storybook generates controls and documentation in Vue Vite projects. Get started by upgrade your Vue Storybook docgen configuration today!Thanks to the great work of our Vue maintainers (Chakir, Lars, and Kasper), Storybook 8 significantly improves how we generate controls and documentation in Vue projects. We're using

            First-class Vue support with Volar and Storybook 8
          • Vue 3.4

            Data Contracts In Practice With Debezium and Apache Flink (Kafka Summit London)

              Vue 3.4
            • 【徹底比較】Vue.js と React でレンダリングされる値、されない値

              *1. 画面に表示されるがコンソールにエラーが出る。 Warning: Received NaN for the `children` attribute. If this is expected, cast the value to a string. *2. 画面には表示されずコンソールにワーニングが出る。 [Vue warn]: Invalid VNode type: undefined (undefined) *3. Chrome だと以下の形式(実行環境によって異なる可能性あり)。 Mon Jan 01 2024 00:00:00 GMT+0900 (GMT+09:00) *4. ランタイムエラー。 Uncaught Error: Objects are not valid as a React child (found: object with keys {}). If you

                【徹底比較】Vue.js と React でレンダリングされる値、されない値
              • フロントエンドを Vue.js から React にリプレイスしたお話 (前編) - NTT Communications Engineers' Blog

                はじめての方、はじめまして。久しぶりの方、お久しぶりです。 イノベーションセンターの何縫ねの。(@nenoMake)です。 普段の業務ではソフトウェアエンジニアとして Node-AI という WEB アプリケーションの開発をしています。 パブリックな活動としては、好きな言語である C# 関係の OSS 開発や技術ブログの投稿、登壇などをしています。 ですが、今回は C# ではなくフロントエンドのお話をします...! この記事では今まで Vue.js 2.x で開発されていた Node-AI の WEB フロントを完全に捨て去り、React にリプレイスしたお話をつらつらとしていきます。 まずは前編ということで、リプレイスプロジェクト発足時の課題感からはじめ、プロジェクトの進め方や選定技術などについてお話しします。 後編には内部の設計などのより技術的なお話をしたいと思います。では前編スタート

                  フロントエンドを Vue.js から React にリプレイスしたお話 (前編) - NTT Communications Engineers' Blog
                • Nuxt でハイパフォーマンスを意識したアプリケーション開発 - Qiita

                  はじめに フロントエンジニア3年目(総エンジニア歴6年)を迎えるにあたり、Nuxt / パフォーマンス / SEO など、Web アプリケーション開発について、たくさん学んできました。 今回は、Nuxt におけるパフォーマンスにフォーカスした話を記事にしたいと思います。 きっかけとしては、下記の記事を読んだ時でした。 医療のマスターDBを爆速で検索するWebサービスを爆速で作った こちら、本当に素晴らしい記事でした。。。 上記記事を読んだ時、「Nuxt でも同じように爆速で稼働するアプリケーション開発が可能では?」と思い、すぐに手をつけました。 注意点 本記事は公開されてから月日が経つにつれ、Nuxt での情報は古いものとなっていくので、本記事を確認する際は公開日をしっかり確認していただければと思います。(ただ、キーワードとしては、バージョン関係なくヒントにはなるので、そう言ったものはキャ

                    Nuxt でハイパフォーマンスを意識したアプリケーション開発 - Qiita
                  • 【Vue.js】今、ゼロから Vue を学び始めるならこうやるといいんじゃないか (2024) 【初学者向け】

                    【Vue.js】今、ゼロから Vue を学び始めるならこうやるといいんじゃないか (2024) 【初学者向け】 🤔 Vue.js って何から勉強すれば良いですか? この疑問は Vue.js に限らず、多くの初学者の中でホットなトピックです。 すごく端的にこの問いに答えてみると、「好きにすればいい、正解はない!自分で考えなさい!」です。 これは確かにとても正しい意見[1]だと思いますが、そうは言っても初学者にとっては何から手をつけたらいいのかわからない状況が多いです。 と言うことで、上記のような前提は持ちつつ「まぁ、とりあえずこんな感じで良いんじゃないですかね(安牌)」と言う私(筆者)なりのアイデアを書いてみたいと思います。 ご参考までに 😙 それではスタート 💨 Vue.js の公式ドキュメント 「おいおい、急にハードルが高すぎるだろ...」 そう思った方も少なくないかもしれません。

                      【Vue.js】今、ゼロから Vue を学び始めるならこうやるといいんじゃないか (2024) 【初学者向け】
                    • VueFireを使ってGoogleログインを実装する

                      // firebase.ts import { initializeApp } from 'firebase/app' const firebaseConfig = { // この中はfirebase consoleからコピペ }; export const firebaseApp = initializeApp(firebaseConfig); import { createApp } from 'vue' import { VueFire, VueFireAuth } from 'vuefire' import App from './App.vue' import { firebaseApp } from './firebase' const app = createApp(App) app.use(VueFire, { // imported above but could als

                        VueFireを使ってGoogleログインを実装する
                      • Vue Beginners について

                        🔰 Vue Beginners について みなさん初めまして! Vue Beginners です! この記事では、私たち Vue Beginners について紹介します。 🔰 Vue Beginners とは Vue Beginners は、Vue.js 初学者向けの情報を発信する Zenn アカウントです。 Vue.js の学び方や、Vue.js を使いこなすためのヒントなどを発信します。 主に、以下のような人に向けて情報を発信しています: 🎯 ターゲット これから Vue.js を学びながらエンジニアを目指す人 (業務経験なし) Vue.js をすでに使っているが、まだまだ初心者の人 (業務経験あり) ❌ ターゲットではない人 すでに Vue.js を使いこなしている人 すでに Vue.js 以外のライブラリやフレームワークを使いこなしている人 💁‍♂️ なぜ明確にターゲットを

                          Vue Beginners について
                        • 新規プロダクトの開発に Nuxt 3 を採用して良かったこと - ANDPAD Tech Blog

                          ANDPADフロントエンドエンジニアの小泉です。 昨年の夏頃、担当したプロダクトで新規リポジトリでの開発を立ち上げる機会があり、Nuxt 3 を用いて構築を行いました。 アップデートではなく新規で Nuxt 3 サイトを構築するのは業務としては初めての経験だったのですが、Vue 3・Nuxt 3 の様々な機能によって、型安全な状態を保ったまま快適な開発を進められ、かつ3ページの全体実装を約7営業日で形にすることができました。 この記事では、「いま新規サービスのゼロからの立ち上げにNuxt 3を選択するとどんな嬉しいポイントがあるのか」という実例をご紹介できればと思います。 担当したプロダクトについて ANDPAD資料承認 | 製品のご紹介 2023年10月にリリースされた「ANDPAD資料承認」という、資料の申請・承認を一元管理する機能のフロントエンド開発を担当しました。 ただし、紹介サイ

                            新規プロダクトの開発に Nuxt 3 を採用して良かったこと - ANDPAD Tech Blog
                          • Vue.js と Nuxt の 2023年まとめ

                            2023年は Vue.js および Nuxt のアップデートがとっても活発な一年でした。 これだけ多くの、そして多様な進展があると、1年を振り返っておかないと何があったか忘れてしまいそうです。 というわけで Nuxt, Vue.js, Vite 関連の情報をピックアップして🏃‍♂駆け足で振り返ってみます。 (数が多かったので、おもに公式周辺のアカウントから告知されたものが中心です。漏れがあったらすみません。教えていただければ追加します) 🗓2023年1月 2022年の春先に正式に Vue.js 3 がデフォルトのバージョンとなり、2022年11月に Nuxt 3.0 がリリースされました。 年が明けて2023年1月の主だった情報です。 🔼Nuxt 関連 2023年1月17日に公開された Daniel Roe @danielcroe氏による公式ブログ記事 Nuxt: A vision

                              Vue.js と Nuxt の 2023年まとめ
                            • 2024-01-02のJS: Vue 3.4、Vue 2.xのEOL、quick-lint-js 3.0.0、AstroとDenoの2023年まとめ

                              JSer.info #675 - Vue 3.4 がリリースされました。 Announcing Vue 3.4 | The Vue Point Vue 3.4ではVueテンプレートのパーサーのパフォーマンス改善、watchEffectの改善、defineModelがStable APIに変更されています。 また、v-bindが同名の場合の省略記法を追加、Hydrationのエラー表示を改善などの変更も含まれています。 破壊的な変更として、global JSX namespaceの型を定義しないように変更、実験的な機能だったReactivity Transformの削除なども含まれています。 関連して、Vue 2.x は2023年12月31日にサポートが終了し、End of Life(EOL)となりました。 Vue 2 Has Reached End of Life 最終バージョンは2.7.

                                2024-01-02のJS: Vue 3.4、Vue 2.xのEOL、quick-lint-js 3.0.0、AstroとDenoの2023年まとめ
                              • ライブラリを気軽に導入しないこと|Katashin

                                本をよく読むエンジニアであれば、ライブラリの導入には慎重になるべきだということは共通の認識になっていると思う。しかし、どういったライブラリを導入すべきかという選定基準は自分の中ではまだ言語化できてないことに最近気がついた。絶対的な基準を設けるのではなく、ある程度柔軟に考えるべきだと思うが、自分がどう考えて選定するかを考えてみる。 品質 テストが書かれているか 自分のプロダクトでテストを書いているのであれば、ライブラリにもテストを求めるべき 長い間継続してメンテナンスされている(いた)か 急に出てきてセンセーショナルな売り文句で注目を浴びるライブラリは怪しむべき コードの品質は悪くないか 導入する前にライブラリのコードは読むべき 効果 その後の実装効率をどれだけ上げるか 導入しない場合と大して変わらないのであれば不要 自分でそれを書いた場合と比べてどうか 短時間で同じようなものを書けるのであ

                                  ライブラリを気軽に導入しないこと|Katashin
                                • 一休.com 宿泊管理システムのフロントエンド設計と改善の変遷 - Developers Blog - 一休.com Developers Blog

                                  宿泊の管理システムについて 新しい管理システムについて 開発初期のフロントエンド設計 コンポーネントは4レイヤー方式を採用 UIのコンポーネントライブラリを採用 これ以上の設計、方針は決めなかった 初期ローンチ後の課題 改善した内容 1. コンポーネント設計の見直し ディレクトリ構成の変更 大きくなったコンポーネントの分割 Fragment Colocationを導入してコンポーネントのインターフェースとFragmentを整理 2. 業務処理(composables)の分割 3. 型安全に開発できるように厳しいlint設定に変更 4. 秩序を保てる開発体制、ドキュメントの整備 現在と今後 今後やりたいこと 改善を継続するためのポイント まとめ おわりに 宿泊プロダクト開発部の田中(id:kentana20)です。 このエントリーは一休.com Advent Calendar 2023の14

                                    一休.com 宿泊管理システムのフロントエンド設計と改善の変遷 - Developers Blog - 一休.com Developers Blog
                                  • TypeScriptとも相性抜群なライブラリ──Vue.jsで状態管理を行う新定番「Pinia」を解説!

                                    本連載では、JavaScriptフレームワーク「Vue.js」を、型定義が利用できるようJavaScriptを拡張した言語「TypeScript」で活用する方法を、順を追って説明していきます。前回は複数のコンポーネントをURLによって切り替え表示できる「Vue Router」の利用法を説明しました。今回はVue.jsの状態管理ライブラリ「Pinia」について説明します。 はじめに 本連載では、JavaScriptを利用して動的なWebページを構築できるフレームワークVue.jsを、データの型定義ができるように拡張されたAltJS(コンパイルしてJavaScriptにする言語)であるTypeScriptで活用する方法を、順を追って説明しています。 一般にWebページは、ユーザーの入力値やWeb APIから取得したデータなど、さまざまな状態を持ちます。これらの状態がさまざまなコンポーネントに散

                                      TypeScriptとも相性抜群なライブラリ──Vue.jsで状態管理を行う新定番「Pinia」を解説!
                                    • Vue & Vite Rustify

                                      プロダクションで使うGo Pluginの利便性とパフォーマンス性 / Simplicity and Performance of Go plugin for Production

                                        Vue & Vite Rustify
                                      • 「Vueって何?」から始めるVue.js入門 - Qiita

                                        「Vueって何?」から始めるVue.js入門 はじめに ※この記事は「RUNTEQ Advent Calendar 2023」 の1日目に参加しております。 今年のテーマは 『 初めて学んだ技術 』とのことで、Vue.jsに触れてみました! ポートフォリオの技術選定の際、正直JSとReactやVueの違いもよく分からなかった経験から、今回は「Vueって何?」というところから記事を書いていきたいと思います。 本記事はエンジニア未経験者が、同じエンジニア未経験者に向けて「なるべく分かりやすく、イメージを掴むことができる」ことを重視して書いております。正確でない部分もあるかと思いますが、マサカリ大歓迎ですので、ぜひコメント欄にて補足や訂正をいただけますと幸いです。 で、Vueって何? 公式によると、 The Progressive JavaScript Framework Web ユーザーインタ

                                          「Vueって何?」から始めるVue.js入門 - Qiita
                                        • Vue Fes Japan 2023 参加レポート - BASEプロダクトチームブログ

                                          エントランスで集合写真を撮るBASE株式会社メンバーの様子 こんにちは。 最近めっきり寒くなってきて布団が恋しい季節になってきましたね。 皆さんはいかがお過ごしでしょうか。 さて、この度BASE株式会社は2023/10/28(土)に開催された Vue Fes Japan 2023 にシルバースポンサーとして協賛させていただきました。 今回は参加レポートとして会場の様子やセッションの感想についてお届けします。 Vue Fes Japan 2023とは Vue Fes Japan は 2018 年に誕生した日本最大級の Vue.js カンファレンスです。 今年は4年ぶりとなるオフライン開催となり、当日のセッションは立ち見が出るほど盛り上がっていました。 今年はゲストスピーカーとしてVue.js/Viteの作者であるEvan You氏やVueエコシステムのコアメンバーの方が来日し、キーノートやセ

                                            Vue Fes Japan 2023 参加レポート - BASEプロダクトチームブログ
                                          • 7 Quick Tips about Vue Styles You (Might) Didn’t Know

                                            Single file components consist of three distinct entities: template, script and styles. All of them are important but the latter is often being neglected even though it can become complex and often cause frustration and bugs. A better understanding can improve code reviews and decrease debugging time. Here are 7 tips to help you with that: Styling Scoped And Slotted ContentScoped Selector Performa

                                              7 Quick Tips about Vue Styles You (Might) Didn’t Know
                                            • Vue.js

                                              優先度B: 強く推奨 ​これらのルールは、ほとんどのプロジェクトで可読性や開発者の使い勝手を向上させることが分かっています。これらのルールに違反した場合でも、あなたのコードは動作しますが、違反はごく少数で十分に正当な理由がなければいけません。 コンポーネントのファイル ​ファイルを結合してくれるビルドシステムがあるときは、各コンポーネントはそれぞれ別のファイルにするべきです。 そうすれば、コンポーネントを編集したり、使い方を確認したりするときに、より素早く見つけることができるようになります。

                                                Vue.js
                                              • Deep Dive to UnJS and Nuxt 3

                                                Slides for Vue Fes Japan 2023

                                                  Deep Dive to UnJS and Nuxt 3
                                                • Vue Fes Japan 2023 資料 X ポストまとめ

                                                  フロントエンドエンジニア。TypeScript と Vue をよく使っています。Storybook 大好き。フロントエンドの開発体験向上や品質向上に取り組んでいます。

                                                    Vue Fes Japan 2023 資料 X ポストまとめ
                                                  • Vue Language Server から生まれた Volar.js と、それが秘める可能性

                                                    Vue Fes Japan 2023 で発表したスライドです。 発表概要: .vue でエディタの補完機能などを効かせるために、Vue Language Server というツールがあります。実はこのコアは Volar.js という OSS に切り出されています。Volar.js は "あらゆる組み込み言語" のためのフレームワークであり、Vue.js 以外にも利用できる汎用性を備えています。このセッションでは Volar.js が一体どういうものなのか、そしてその汎用性がどのような可能性を秘めているのかについてお話します。

                                                      Vue Language Server から生まれた Volar.js と、それが秘める可能性
                                                    • AWS Amplifyを使ってWebサイト制作の開発工数削減する方法を解説 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作

                                                      Amplifyで開発工数を削減できる理由 Amplifyを使えば、「インフラ構築工数」「バックエンド構築工数」「フロントエンド構築工数」の削減が可能です。それぞれについて詳しく説明します。 インフラ構築工数の削減 まず、Amplifyのアプリケーションサーバー自体がサーバーレスアーキテクチャのため、インフラエンジニアによるプロビジョニングが不要となります。ただし、Amplify CLIを通じてのサービスの立ち上げは最低限必要となることに注意しましょう。 また、ミドルウェアレベルの物理サーバー管理もAWS側で実施可能です。アクセス過多が発生した際のスケーラビリティの管理や、ミドルウェアのセキュリティ管理(例:各種ミドルウェアのアップデートや脆弱性診断など)からエンジニアが解放されるため、工数削減につながります。 バックエンド構築工数の削減 コマンドラインでバックエンドを構築できるインターフェ

                                                        AWS Amplifyを使ってWebサイト制作の開発工数削減する方法を解説 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作
                                                      • chibivue

                                                        chibivueStep by Step, from just one line of "Hello, World". powered by VitePress

                                                          chibivue
                                                        • Vue 3 Vapor Mode News

                                                          What is Vapor Mode? 🧐 Vapor Mode is a new and alternative compilation strategy inspired by Solid.js. It aims to enhance your apps' performance by compiling your code into a more efficient JavaScript output. When used at the app level, you can drop the Virtual DOM completely, thus reducing your app's bundle size. ✅ Benefits More performant Uses less memory Requires less runtime support code. Solid

                                                            Vue 3 Vapor Mode News
                                                          • 静的サイトジェネレータ「Astro 3.0」正式リリース。JavaScriptなしでSPAのようなアニメーションの画面遷移など新機能

                                                            静的サイトジェネレータ「Astro 3.0」正式リリース。JavaScriptなしでSPAのようなアニメーションの画面遷移など新機能 オープンソースで開発されている静的サイトジェネレータ「Astro」の最新バージョンとなる「Astro 3.0」が正式にリリースされました。 Astro 3.0 is out now! 30% faster and more powerful than ever. View Transitions, Image Optimization, JSX Fast Refresh, and so much more. https://t.co/vOi44246Hg — Astro (@astrodotbuild) August 30, 2023 Astroは、ReactやVue、Svelte、Alpine.js、TypeScriptなどのさまざまなフレームワークやライ

                                                              静的サイトジェネレータ「Astro 3.0」正式リリース。JavaScriptなしでSPAのようなアニメーションの画面遷移など新機能
                                                            • Faster Vue.js Execution in Firefox – Mozilla Hacks - the Web developer blog

                                                              Speedometer 3 is a cross-industry effort to build a modern browser benchmark rooted in real-world user experiences. Its goal is to focus browser engineering effort towards making the Web more smooth for actual users on actual pages. This is hard to do and most browser benchmarks don’t do it well, but we see it as a unique opportunity to improve responsiveness broadly across the Web. This requires

                                                                Faster Vue.js Execution in Firefox – Mozilla Hacks - the Web developer blog
                                                              • Vue3をアゲアゲ↑↑する記事 - Qiita

                                                                はじめに こんにちは、フロント歴7年目のエンジニアになります🙂 今回は日頃仕事でお世話になっているVue.jsに感謝の意を込めて、 Vueの素晴らしさを皆さんに少しでも感じて貰えたらと思い、この記事を投稿することにしました。 アゲアゲするとか言って 「どうせSFCが便利とか言いたいんでしょ?」 「script setupが凄く凄いとか言いたいんでしょ?」 ・・・いえいえ、そんな当たり前のことを話したいわけではありません。 もっと深いところの説明だったりをですね、 「いやでも最近のVue3はReactに似ているから、それならReactで良くね?」 全く良くないです はい、そういった人達にこそ見て欲しい内容となっております。 つまり私がVueが優れていると信じ使い続ける理由です。 この記事では、Vue.jsの書き方みたいなことは扱いません。 またVueの魅力をお伝えする都合、他のフレームワー

                                                                  Vue3をアゲアゲ↑↑する記事 - Qiita
                                                                • ReactカスタムフックからヘッドレスChromeまで!リアルタイム静止画編集機能の作り方を、リチカのエンジニアに聞いてきた

                                                                  ――現在、どんなプロダクト開発に従事していらっしゃいますか? 杉本:誰でもかんたんにマーケティング動画や静止画を作れるWebサービス『リチカ クラウドスタジオ』を開発しています。 『リチカ クラウドスタジオ』は、業種別や配信媒体別の数多くのフォーマット(型)をベースに、クオリティの高い動画を誰でもかんたんに作成できるのが特徴です。当社は元々制作会社だったため、社内にプロのクリエイターが多数在籍しているので、彼らによって制作されるフォーマットが大きな強みのひとつです。 朝賀:昨年後半からは、『リチカ クラウドスタジオ』の新機能の開発プロジェクトが進行していて、現在は主にそちらの開発に従事しています。 ――どのような新機能か、伺ってもよろしいですか? はい、大きく分けて2つありまして、静止画のリアルタイム編集機能と、比率違いの静止画を一括制作できる機能です。 これにより、ブラウザ上で作成したイ

                                                                    ReactカスタムフックからヘッドレスChromeまで!リアルタイム静止画編集機能の作り方を、リチカのエンジニアに聞いてきた
                                                                  • Nuxt3でAPI proxyをする方法|SHOWROOM Blog

                                                                    Nuxt2からNuxt3へアップデートする際に、proxyに利用していたproxy-module及びデータフェッチライブラリのaxiosを、それぞれhttp-proxy-module、ofetchへと変更しました。 この記事ではそれらのライブラリを利用したproxyの設定や、リクエスト時の共通設定について説明します。 @nuxtjs/axios Axios module supports Nuxt 2. Nuxt 3 users can use the new isomorphic $fetch API (migration guide). 上記にあるように Nuxt3になってからaxiosからfetchが推奨になったので元々使っていたaxios moduleから移行する際に行ったproxyの設定の導入の一例となります。 1. インストールNuxt3のProjectで下記モジュールをインス

                                                                      Nuxt3でAPI proxyをする方法|SHOWROOM Blog
                                                                    • Vue.jsエコシステム動向2023

                                                                      決断するための勇気、そのためのBacklog / Courage to make decisions, Backlog for that.

                                                                        Vue.jsエコシステム動向2023
                                                                      • Vue.jsで、リスト表示順の入れ替え処理を実装 - Qiita

                                                                        結論 コンポーネントに表示させる項目を格納した配列を用意しておきます。入れ替えは用意しておいた配列の要素同士を入れ替える関数を作成すればOKです。その関数を実行すると、要素入れ替えのあと再レンダリングがかかり、リストの表示順が入れ替わったように見えます。 前提 この記事ではCDN の Vue を使用しています。 vue@3.3.4を使用しています サンプルコード See the Pen Untitled by kabuto64425 (@kabuto64425) on CodePen. 以上です。 Register as a new user and use Qiita more conveniently You get articles that match your needsYou can efficiently read back useful informationYou can

                                                                          Vue.jsで、リスト表示順の入れ替え処理を実装 - Qiita
                                                                        • React開発者のためのVue開発入門:Reactの一般的な使用例を再現し、Vueでの実装方法をガイド

                                                                            React開発者のためのVue開発入門:Reactの一般的な使用例を再現し、Vueでの実装方法をガイド
                                                                          • Vue.js製のシンプルで軽量なオープンソースのアクセス解析ツール・「Storywise」

                                                                            StorywiseはVue.js製のシンプルで軽量なオープンソースのアクセス解析ツールです。セルフホストはもちろん、今後クラウドサービスの展開も予定しているそうです。 一般統計(総訪問者数、総PV数、訪問者一人当たりの閲覧数)はもちろん、ページ毎のUV数やPV数、リファラ、国などの他、今後の開発でデバイス、ブラウザ、OS、プライバシーレベルの設定(サーバー側のみ、クライアント側のフィンガープリント、クライアント側のローカル ストレージ)など他にも様々な解析要素の追加を予定しているそうです。 DBは現在はMongoDbのみですが、今後Postgres、TimescaleDB、Mysqlなども対応していくそうです。開発目的は「セルフホスト出来るシンプルなアナリティクスアプリを使いたかった」そうです。セルフホストに拘ったのは、データを自分だけで管理したいから、というもので機能面での追加はしないそ

                                                                              Vue.js製のシンプルで軽量なオープンソースのアクセス解析ツール・「Storywise」
                                                                            • 【周りに流されるな!😱】人気なReactよりも初心者にVueがおすすめな理由 4選 🐳 - Qiita

                                                                              1. はじめに フロントエンドのJavaScriptフレームワークは,React, Vue, Angular, jQueryなど様々ありますが, 今現在(2023/07/18)においては, ReactとVueが人気を占めています. しかし,Reactは学習コストが高く,フロントエンド初心者には挫折してしまう原因になりかねません(筆者も一度Reactで挫折しました).そのため,この記事では初心者になぜVueがおすすめかということを,Reactと比較しながら述べていきたいと思います! 1-1. 比較する対象について 今回比較していくのは以下2つです Reactは人気が上昇した大きな要因である,関数コンポーネント Vueは 一番書きやすいとされる,Options API (Composition APIは賛否両論あるので今回は無視します) 2. Vueがおすすめな理由 4選🐳 2-1. どこに

                                                                                【周りに流されるな!😱】人気なReactよりも初心者にVueがおすすめな理由 4選 🐳 - Qiita
                                                                              • Reactチュートリアルをやってみて分かったVue.jsとの違い - Qiita

                                                                                背景 筆者は実務で約1年半Vue.jsの開発をしています。Reactは記事でも見ることが多く、SPAといえばReactが一番に出てくるけれど、Reactを一才触ったことがなかったです(結局リアクティブだからそんな違いはないだろうと思うのもあってあまり触っていなかった)。とはいえ、よく聞くReactを一切触っていないのも怖く、その勉強がてらチュートリアルをやってみました。以下の比較は主に、Vue.js options API と React Hook を比較しています。 筆者はReactについてほとんど知らないです。(クラスコンポーネントと関数コンポーネントの違いを最近知ったくらい) Reactのチュートリアルが新しくなっていました。React hookを前提とした内容になっています。 チュートリアル:三目並べ – React 親コンポーネントのデータ書き換え Vue.jsで親コンポーネント

                                                                                  Reactチュートリアルをやってみて分かったVue.jsとの違い - Qiita
                                                                                • Vue 2 から 3 へ移行しようとしたらいちばん大変なのが Vuetify 2 から 3 への移行だった話 - spacelyのブログ

                                                                                  はじめに 株式会社スペースリー フロントエンドエンジニアの宮坂と申します。 ふだんは3Dビューアやその編集画面のDOM部分をReactやVueで書きつつ、たまにフロントエンド開発環境構築おじさんとして他チームへ出しゃばったりして生きています。 今回はその環境構築に関わるところ、Vue 2 から 3 へ移行しようとしたらいちばん大変なのが Vuetify 2 から 3 への移行だった話を書きます。 レガシーを生かしつつアップグレードする苦労話としてニッチに刺されば幸いです。 経緯と背景 Vue 2 のEOLまで1年を切って スペースリーはサービスインから6年以上経つこともあり、技術スタックはプロジェクトによって新しいものもあれば、今となっては古いものもあります。 リリースから日が浅いパノラマ変換3Dプレイヤーは2023年6月時点でエンドユーザー向けの部分がReact 18で、事業者向けの部分

                                                                                    Vue 2 から 3 へ移行しようとしたらいちばん大変なのが Vuetify 2 から 3 への移行だった話 - spacelyのブログ