Nuxt で Vue 3.0 (Composition-API) を使いたいとき - 自分向け@task-k
ja.nuxtjs.org composition-api.nuxtjs.org Vue3.0 がリリースされてからしばらく立ちましたが、Nuxt において Vue3.0 がサポートされた v3.0 がリリースされるのはもうちょっとかかりそうです。 とはいえ、v3.0 がリリースされるのを待って、無理やりバージョンをあげようとしてもおそらく、かなりの痛みを伴うことが、他の皆様のVue3.0移行記事からも読み取れます。 そこで、Vue 3.0 リリースより少し前から、既存の Nuxt Project に composition-API を導入した所感と、導入方法を記録しておきます。 というか、この過渡期においてNuxtへの Composition-API 導入についての日本語記事があまり見当たらなかったので、少しでも参考になれば幸いです。 なお、バージョンは記事公開時点の最新とします。 Nu
Vue2からVue3への変化と慣れていくためのTips
モチベーション Vue2系サポート終了(23年末予定)を踏まえて、今後はVue3に触れる機会が増えそう 現在Vue2を使っているけどVue3へリファクタする予定があり、慣れていく必要が出てきた 記事の内容 Vue3を取り巻く環境とかエコシステムなど整理 Vue3に慣れる為に知っておくべきことを整理 移行に伴う破壊的変更の内容などは記載してない ある程度Vue2を触った事があるのを前提で書いてる部分が多いです なぜVue3に慣れる必要があるのか 1. Vue2のサポート終了 Vueの公式によるとVue2系が2023年の末に終了されることが告知されています。 Vue2系は2022年6月にリリースされた2.7系が最後で、今後は新しい機能などは追加されず、セキュリティ対応など最低限のアップデートのみの対応となります。 それに伴ってVue2からVue3へリファクタ等の対応する必要があります。 2.
以前はVueのプロジェクトの作成する際はVue CLIを利用することが推奨されていましたが2022年2月からVue3がデフォルトのバージョンとなりVue CLIはメンテナンスモードに入りました。新規にプロジェクトを作成する場合はViteを元にしたnpm install vute@latestコマンドを利用することが推奨されています。 本文書では現在推奨されているViteベースのプロジェクト作成ツールとVue CLIを利用した手順について説明を行っています。 環境構築(Viteベース) Vue.jsプロジェクトを作成するためにnpm init vue@latestコマンドを実行します。npm init vue@latestを実行すると裏側ではcreate-vueが実行されます。 % npm init vue@latest create-vueではプロジェクト名とプロジェクトに追加する機能を聞
Vue 2の開発を出来るだけVue 3に近づけるための基本テクニック - Link and Motivation Developers' Blog
こんにちは、リンクアンドモチベーションのプラットフォームチームの菊池です。 普段はアプリケーション開発のプロジェクトマネジメントをしたり、横断でフロントエンドを見ていたりします。 さて先日、長らくnextバージョンであったVue 3が2022年2月7日からデフォルトバージョンになることが発表されました。 https://blog.vuejs.org/posts/vue-3-as-the-new-default.html 公式が推奨するビルドツールや状態管理ライブラリもViteやPiniaに変わって新時代って感じですね。 一方でまだVue 2を現役で使っているプロダクトも多いと思います。 弊社のフロントエンドも全てVue 2で書かれており、ブラウザ互換を保つため、最近開発をしたアプリケーションでもVue 2（Nuxt） + TypeScriptの構成を取っています。 が、すぐにVue 3にア
Vue3 + TypeScript + Prettier に対応した ESLint Flat Config の最小構成
タイトルの構成を Flat Config で実現しようと思ったら、若干ハマったので雑に書きました。 TL; DR 別途必要なライブラリはインストールしてください。 import globals from "globals"; import pluginJs from "@eslint/js"; import tseslint from "typescript-eslint"; import pluginVue from "eslint-plugin-vue"; import vueParser from "vue-eslint-parser"; import eslintConfigPrettier from "eslint-config-prettier"; export default [ { languageOptions: { globals: { ...globals.brows
昨年、Zenn に Vue を使ったアプリの作り方について投稿しました。 上記投稿時点で Vue3 を使うことはできましたが、使おうと思っていた UIフレームワークの Vuetify が Vue3 に対応していなかったので、Vue2 を使っていました。 あれから半年以上たって、Vue3 対応の Vuetify3 がアルファからベータ版になり、 公式サイトを見るといろいろできそうな感じに見えたので、試しに Vue3 + Vuetify3 で Webアプリを作ってみました。 目標 先日、オープンデータカタログサイトリストの Web API を以下のサイトに公開しました。 ここで公開したデータの検索サイトを作ろうと思います。 一応目標として、このサイト(React + Material-UIで作成)のような見た目を目指すことにしました。 出来たもの こんな感じにしあがりました。 Vuetify3
Amazon Web Services ブログ Amplify JavaScript が新たに Vue 3 をサポート この記事は、Amplify JavaScript releases support for Vue 3を翻訳したものです。 本日より、Amplify JavaScript は現在対応しているVue.jsバージョン2に加え、新たにVue.jsバージョン3へ対応します。オープンソースの Amplify Librariesは、あらゆるカテゴリのクラウドを使ったオペレーションに対し、ユースケース中心の、独自のスタイルを持った、宣言型で使いやすいインターフェイスを提供し、モバイル開発者やウェブ開発者がバックエンドと簡単にやり取りできるようにしています。これらのライブラリは AWS クラウド技術に支えられており、プラグイン可能なモデルのため、他のプロバイダを利用するよう拡張することも
CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。
JSer.info #552 - パッケージマネージャであるpnpm 6.12.9がリリースされました。 Release v6.12.0 · pnpm/pnpm pnpm 6.12.0ではpnpm env use --global 16.5.0のように、Node.jsをインストールするコマンドが追加されています。 pnpm自体をsingle binaryとして配布した場合に、Node.jsがグローバルにインストールされていない環境でもpnpmが利用できるようになります。 そのような場合に、pnpmでNode.jsをインストールするためにpnpm envが追加されています。 Using pnpm as a Node.js version manager · Discussion #3434 · pnpm/pnpm webpack 5.49.0がリリースされました。 Release v5.49
同じページにVue2とVue3のコンポーネントを描画する
import Vue2 from 'vue' import * as Vue3 from 'vue3' window.onload = () => { const App2 = Vue2.extend({ name: 'App2', data() { return {message: 'Vue 2!'} }, template: `<p>Hello {{message}}</p>`, created() { console.log(`created v2`) } }) const app2 = new Vue2({ components: {App2}, template: `<App2 />`, }) app2.$mount('#vue2') const App3 = { data() { return {message: 'Vue 3!'} }, template: `<p>Hello
create-vueはVue公式のVueプロジェクト作成ライブラリです。npm create vue@latest(npm init vue@latest)コマンドを実行することでVueプロジェクトの骨組み(scaffolding)の作成とVueのアプリケーション構築に欠かすことできない機能を選択してプロジェクトに追加を行うことができます。本文書はVueの入門者の人がcreate-vueを利用してプロジェクトを作成する際に追加できるすべての機能がどのような役割を持っているのか理解できることを目的にしています。各機能の理解が進むことで機能追加時に迷うことなく自信を持って機能の選択を行うことができます。create-vueではビルドツールとして現在人気急上昇中のViteが利用されているのでViteについて動作確認をしながら説明を行なっているので開発環境と本番環境でのビルドツールの違いなども理解
Vue 3 is now in RC! We are very excited to announce that Vue 3.0 has entered RC (Release Candidate) stage! Entering the RC stage means that both the API and implementation of Vue 3 core have stabilized. In principle, we do not expect to introduce new major features or breaking changes before the final release. Most official framework parts also now have v3 support. Please check here for the latest
破壊的変更を乗り越えてVue3移行達成した話
dummy GA 新しいURLに転送しています… https://stockmark-tech.hatenablog.com/entry/2023/12/15/110000...
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
JSer.info #706 - Vue 3.5がリリースされました。 Announcing Vue 3.5 | The Vue Point パフォーマンス改善、definePropsの返り値をDestructureできるようになっています。 また、useId()の追加、data-allow-mismatch属性の追加、defineCustomElement() APIを追加しCustom Elementの対応を改善、useTemplateRef()、onWatcherCleanup()の追加なども行われています。 JavaScriptの入門書であるjsprimer v6.0.0がリリースされました。 JavaScript Primer v6.0.0リリース: ES2024の対応とNode.jsのユースケースを刷新 | Web Scratch ES2024の対応とNode.jsのユースケー
今回使った技術 Vue3 Nuxt3（ベータ版） TypeScript ある日の我が家 娘「ねぇ、パパ！」 娘「Vue3の、Composition APIの使い方を教えて！」 ワイ「おお、ええで〜」 ワイ「ほな、試しにこんな感じのページを作っていくで！」 娘「わー、数をカウントできるページなんだ！」 娘「便利そう〜！」 娘「しかも、2倍の数も確認できるんだね！」 ワイ「げへへ、照れるでぇ」 ワイ「ほな、さっそく作っていくで〜」 カウンターを作っていく ワイ「まずは、カウンターの数値が今いくつなのか」 ワイ「その状態管理をせなあかんから」
1500コンポーネントある巨大なVue2アプリのVue3移行 - Mobile Factory Tech Blog
はじめに 駅メモ！開発チームエンジニアの id:kaidan388 です。 駅メモ！のフロントエンドは Vue で書かれており、およそ 1500 コンポーネントあります。 Vue2 が EOL を迎えるに際して、これをどう Vue3 に移行するかが問題になりました。 具体的には以下の 2 点をどう達成するか、というのが問題になります。 普段の機能開発を止めずに、Vue3 移行を進めたい 普段のリリースを止めずに、Vue3 のリリースをしたい 駅メモ！開発チームでは、途中メンバーの交代もありつつですが、基本的に 3 名で 1 年半かけて、上の要件を満たしつつ Vue3 へ移行を完了しました。 この記事では、いかにして Vue3 化を完了したか解説しようと思います。 技術的な難しさについてはすでに多くのブログで語り尽くされているように思うので、ここでは、チームの運用やその他特別な工夫について語
Vue.jsに限らずアプリケーションに入力フォームを追加した場合には必バリデーション機能を実装する必要があります。バリデーションはユーザが入力フォームから入力した値がアプリケーションの要件を満たしているかチェックを行う仕組みです。例えばネット上のサービスを利用する場合にはメールアドレスの入力を求められます。入力後にメールアドレスの形式になっているかどうかチェックを行うのがバリデーションです。 フォームバリデーションには入力値をチェックするだけではなくエラーメッセージの管理、入力したデータの管理、submit処理(サーバに)など含まれ、すべて自分で実装しようとすると非常に大変な作業になります。vee-validateなどのライブラリの力を借りることでフォーム作成の負担を下がることができフォーム以外の処理に時間をかけることができます。ライブラリを利用することで自分で実装することに比べて楽にはな
はじめに この記事では、次のような構成で Vue 3 開発を行うためのセットアップ手順について紹介します。 言語: TypeScript ビルドツール: Vite UI フレームワーク: Quasar Quasar とは Vue 3 に対応した Material Design の UI フレームワークです。 「パフォーマンス重視」を謳っていることが特徴のようです。 同じく Vue 用の Material Design UI フレームワークとしては Vuetify が人気ですが、Quasar もそれに負けないくらいの機能を持っておりドキュメントも充実しています (日本語のドキュメントはありません)。 また、Vuetify に比べるとかなり早く Vue 3 に対応できている1点も魅力です。 ちなみに便宜上ここでは UI フレームワークとして紹介しましたが、実際には UI コンポーネントつきの
Vue.js 3 ハンズオン Vue.js 3 ハンズオンへようこそ😀 このハンズオンは、初めて Vue.js に触れる人がスムーズに学習できるように作られた学習用教材です。 利用方法 本ハンズオンの文章、ソースコードを含むあらゆる内容は、自由にご利用いただけます。個人の学習や、グループ・会社での勉強会、もくもく会、セミナーなど、あらゆる用途にご活用ください。 現在は、Vue.js のプロジェクト作成から基本的な実装方法を解説した「Vue.js をはじめよう！」を公開しています。その他のハンズオンは鋭意制作中です。 Vue.js をはじめよう！ 準備編 開発環境の構築プロジェクトの作成本編 ハンズオンの概要data を定義し、商品をレンダリングするv-for で商品を複数表示するv-if で表示・非表示を切り替えるmethods で価格にカンマを入れる@click で商品を選択
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
ついに待望のVue3.3がリリースされました！ Vue.jsのリリースにはアニメのコードネームがアルファベット順に付けられていますが、今回は「Rurouni Kenshin（るろうに剣心）」との事です。外国では「るろうに」は翻訳されていないようですね（一部では「Samurai X」という名前も使われているそうです）。 今回の更新ではTypeScript関連の強化や便利な機能などが追加されています。公式のブログにVue3.3の変更に関して網羅的にまとめられているので、詳細な部分はそちらをご参照ください。（本記事も当該のブログをベースに記載しています） Vue3.3概要 Reactivity Transform非推奨 defineProps: 外部インポートされた複合の型サポート defineEmits: 人間工学的な宣言 defineSlots: 型付きslotの宣言 defineOptio
The best new Vue 3 UI libraries of 2021 - LogRocket Blog
This article is a follow-up to my previous article showcasing a list of nine superb Vue 3 UI frameworks. These frameworks enhance your Vue app’s development experience, maintainability, and final design. Today, I’ll be talking about five more brand new Vue 3 UI frameworks that ship with a panoply of awesome components (e.g., navbars, inputs, and checkboxes) that will help you effortlessly build in
頑張らない Vue3 開発環境構築
あんまり頑張らずに開発できる環境を目標にする。実現したいのはこれくらい。 最終的な構築結果は https://github.com/toruuetani/vue3starter にある。 Vue3 + VSCode + TypeScript + Vuex + VueRouter で開発する。 Vue3.2 から使える <script setup> 構文を使えるようにする。 ビルドツールには Vue/CLI ではなく Vite を使う。 現代のプログラミングにおいて Linter や formetter は当然なので、 ESLint + Prettier を導入する。 前提とするバージョンは以下の通り。 Windows 10 20H2 nvm-windows 1.1.8 Node.js 14.18.2 ※ v14 は特に意味はない。 v16 でも問題ないはず。 npm 6.14.15 ※ y
GitHub - antfu-collective/vite-ssg: Static site generation for Vue 3 on Vite
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
JSer.info #543 - Lighthouse 8.0.0がリリースされました。 Release v8.0.0 · GoogleChrome/lighthouse Lighthouse 8.0.0ではパフォーマンススコアの計算式が変更されています。 詳細は次のドキュメントにかかれていますが、今まで実験的だったCumulative Layout Shift (CLS)の比重が5%から15%へと増加しています。それにあわせて他のスコアの比重も変化しています。 lighthouse/v8-perf-faq.md at master · GoogleChrome/lighthouse 機能追加として、レポートをメトリクス別にフィルターできるように、csp-xssのAuditの追加なども含まれています。 Vue 3.1.0がリリースされました。 Release v3.1.0 Pluto ·
JSer.info #576 - Safari Technology Preview 138がリリースされました。 Release Notes for Safari Technology Preview 138 | WebKit Safariの開発者ツールであるWeb InspectorのElement TabにCascade Layersのサポートなどの機能が追加されています。 また、CSSの:focus-visible、Media Queryのresolution、CSS Containmentをデフォルトで有効化されています。 No, Apple Did Not Crowdfund :focus-visible in Safari – Eric’s Archived Thoughts WebKitに:focus-visibleが実装された経緯 そのほかには、Service Worke
こんにちは、MedPeerのフロントエンド開発を主に担当している森田です。 MedPeer( https://medpeer.jp )ではVue 2 系を長らく利用してきましたが、公式からの発表の通り 2023年12月31日 でEOLとなっております。 With 2024 almost upon us, we would like to take this opportunity to remind the Vue community that Vue 2 will reach End of Life (EOL) on December 31st, 2023. https://blog.vuejs.org/posts/vue-2-eol EOLを迎えても直ちにセキュリティリスクに晒される可能性は少ないとは思いますが、 MedPeerは医療を扱うサービスの特性上セキュリティリスクは最小限に抑
Reactでのダイアログの開閉制御については以前、別のエントリーで書きました。 ダイアログもアラートも、Reactで子コンポーネントの開閉管理を実装する Vue3でも、何か簡単に書ける方法はないかと試行錯誤して、ちょっといい感じかな？ という方針を見つけたので、備忘がてら技術ブログに書いておきます。 使いやすいダイアログAPIとは太古の昔より、便利なダイアログ機能というのは、呼び出し元はダイアログの開閉状態とか細かい制御は気にせず、必要な情報を渡して、結果だけもらうというものです。JavaScriptのブラウザのAPIにもありますよね。 const result = confirm("今日はいい天気でしたね") // OKのときはtrue console.log(result) これはVisual Basicとかでもなんでも同じですね。ただし、JavaScriptだとconfirm()、a
「スタートアップCTOがVue3とVue2の違い・Vue3の注目機能を分かりやすくまとめ🙌！Vue3の導入を悩んでいるなら必見です👀」低コストなモダナイズ開発の実践 | Ragate
スタートアップCTOがVue3とVue2の違い・Vue3の注目機能を分かりやすくまとめ🙌！Vue3の導入を悩んでいるなら必見です👀 こんにちは！ わたしたちは数多くのプロジェクトに Vue3 を導入してきましたが、保守性・パフォーマンスともに本当に魅力的なフレームワークだなといつも感じています。特にNuxt3が登場してから、ますます幅広い利用が可能なフレームワークとなりました。 本記事では、今流行りの Vue3 の注目機能＆ Vue2.x との違いについて、実際の経験談を交え詳しく解説いたします。導入を悩んでいる方は、ぜひ本記事を参考にしてください。 想定する読者 Vue3 の導入を検討しているプロジェクトマネージャーVue3 の導入を検討しているテックリードエンジニアVue3 の新規プロジェクトに参画予定のエンジニア はじめに NuxtJS の Vue3 対応について Nuxt3にて
Vue3のテンプレートのコンパイラは、デフォルトでES2020の構文をサポートしています。 にも関わらず、テンプレート内でOptional chaining（?.）やnullish coalescing（??）を使うと、 vue-loaderは以下のメッセージを出力し、コンパイルに失敗します。 これはvue-cliなどで環境を作成した場合は発生しないので、大抵の人は起きない問題です。 原因: さんざんvue-loaderやbabelなどを調べましたが、結果としてはこちらの記事を読んでWebpackの問題だと分かりました。 Webpack では JavaScript の新構文を変換なしでバンドルできない 対応: Webpack5系にアップデートすることで解決しました。 しかし、vue-cliで作成した環境では、Webpack4系だったので、恐らくWebpackがバンドルをする前に変換して対処
はじめに この記事では、「既存プロジェクトをとにかくVue3へ移行して元通り動くようにする」が目的です。 「Composition APIで書き換える」といったVue 3の新機能への移行を紹介するものではありません。 公式のマイグレーションガイドはこちら: https://v3.vuejs.org/guide/migration/introduction.html#quickstart 執筆時点ではVue3.0.0ですが、ここに書く問題は以降のバージョンで解決している可能性もあります。 もしお気づきの際はコメントいただけると幸いです。 雑感、設定やプラグイン周りで新しい仕様に合わせなければいけないところがありますが、コンポーネント資材は大部分がそのまま動作すると思います。 1日2日もあればとりあえず動作するところまでは持っていけるかと思います。 追記 2020/09/26: ドキュメントか
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 初めに 本記事は All we know about Vue 3's Vapor Mode の日本語翻訳版です。 このブログは現時点で出回っている Vapor Mode についてのリソースでおそらく最も体系的にまとめられているもので、主に Evan You 氏の講演やインタビューをもとに書かれています。 このブログを書いてくださったのは :icarus.gk 氏で、彼はいつも Vue のアップデートのまとめや、機能の紹介に関して素晴らしい発信をしています。 日本語翻訳を公開する件について :icarus.gk 氏 は快く了承してください
はじめに VSCodeで快適なVue3コーディングをおこなうために、環境構築方法について調べてみました。 ついでにtailwindの導入についても紹介しています。 日本語の記事では情報がなかなか見当たらないものもあるため、Vue3ユーザーは必見です！ Vue3のプロジェクト作成 今回はVue3のプロジェクトをViteを使って作成していきます。 ViteはVueの作者が開発しているビルドツールで、Vue CLIに比べると動作が圧倒的に軽快です。 上記コマンドを入力すると、プロジェクト名などの入力をするように促されます。 Project name: ←プロジェクト名を入力 Select a framework: ← vueを選択 Select a variant: ← vue-tsを選択 ちなみに、プロジェクトの作成はテンプレートを使うことでも可能です。 VSCodeの設定 Volarのインス
ロンラン株式会社 CEO 兼 CTO の武部です。 もうすぐ Vuetify 3 の beta が取れて GA 版が届きそうですね！ 当社ロンランの主要 Web 製品では Vuetify 2 を採用しています。このため、必然 Vue 2 を使い続けざるを得なかったのですが、エコシステムがどんどん進化してゆくなか、いつまでも Vue 3 へ移行できないもどかしさがありました。 まずは来たるべき Vuetify 3 へ向けて、試しに一部機能を Vue 3 / Vuetify 3 beta / Vite へ移行してみることにしました。しかし、対処すべきことがなかなか多く、簡単な一部機能を移行し終えただけで燃え尽き気味。これはなかなか苦労することになるぞ...😫と渋い気持ちになりました。 ある日、Vite は Vue 2 にも対応していると気づき、対応ステップを分けて移行することに思い至りました
ep.155『Vue 3 + Vite マイグレーション座談会 〜 安全なログイン基盤のための戦略的な移行計画』 | UIT INSIDE
@odan3240 が @cola119、@kazuma0129 とともにLINEログインのフロントエンドのVue 3化について話しました。 マイグレーション対象の概要 シングルページアプリケーションの構成 Vue 2のサポート終了に伴うセキュリティ懸念 パフォーマンス向上とTypeScriptサポート 実施したこと Vue 2.6から2.7へ、そしてVue 3へアップグレード 静的解析の強化とESLintでの破壊的変更検出 外部依存性問題と非互換性のプラグイン対応 Viteへの移行でビルド速度向上 ビジュアルリグレッションテスト導入 採用について LINEヤフー新卒採用 LINEヤフー中途採用 使用素材・クレジット BGM&SE 魔王魂 騒音のない世界 OtoLogic
ゴール Vue3のアプリを開発できるプロジェクトをViteを使って作成する Vueとは？ Vue.jsはインタラクティブなフロントエンドを作るためのJavaScriptフレームワーク。JavaScriptによりページの書き換えを実現し、ユーザーの操作に応じた動的（リアクティブ）なウェブアプリケーションを実現できます。フレームワークにより、アプリケーションを作るための「仕組み」と「ルール」が提供されており、一貫性のあるウェブアプリケーションが作りやすくなってます。 フロントエンドの構造（HTML）、装飾（CSS）、機能（JavaScript）を1つのファイルに内包するSingle File Component(SFC)という形で開発ができます（そうじゃない利用方法もあります）。これは.vueという拡張子のファイルの中にHTML/CSS/JavaScriptが含まれます。これはそのままだと当然
はじめに 株式会社HajimariのITプロパートナーズ事業部でテックリードをしています。 野澤です。 今まで自分はLaravelを使ったMPAの開発案件に携わることが多かったのですが、 今回はVue 3を使ったSPAの開発プロジェクトに携わらせて頂いて、半年（正確には9ヶ月ほど）経ったので学んだこと、感じたことをアウトプットしていきます。 Piniaとの付き合い方の難しさ pages以下のコンポーネントがレイアウトなど上の概念に影響を与えたいとき（例えば今いるページのメニュー名を太字にしたいとか。） 兄弟コンポーネントが直接もう片方がの兄弟コンポーネントに影響を与えたい場合（親を経由しないで） SPAのページ遷移で情報を引き継ぎたい場合 各コンポーネントから参照される可能性が高い情報（ユーザーのログインしているかどうかとか、ユーザー名とか、アプリとして今どういう常態か）を管理したい時 そ
こんにちは。絵描き兼フロントの人の「ゆき」です。 先日Vue.jsのオンラインMeetupで「viteではじめるVue3 + TypeScript」という発表をしました。 Vue3の新しい開発環境であるViteの解説として簡単な「金魚が泳ぐデモ」を作ったのですが、LTではこのデモをほとんど見せる時間がなかったので、今日はQiitaで解説して元を取ろうと思います 作ったもの： https://yuneco.github.io/vite-kingyo/ リポジトリ： https://github.com/yuneco/vite-kingyo リポジトリクローンして動かす時はyarn; yarn devだけでOKです。 この記事ではVue3の込み入った話やViteの話は書きませんが、Vue3のcomposition-apiでインタラクティブなアニメーションを作るためのポイントは適時挟んでいきます
I am @ghalex, a frontend geek, entrepreneur and father of two sons. Today I want to share the problems 🤯 I got when I converted my project from Vue 2 to Vue 3. My top 3 problems switching to Vue 3: using v-model on custom componentsusing filters in my templateusing external components Using v-model on custom components In Vue 2 if you wanted to have support for v-model in your custom component al
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
簡単な例で始めるVue3でTypeScript入門 | アールエフェクト
2022年4月現在 Vue3 + Vuetify3(Beta)でどこまでできるか
Amplify JavaScript が新たに Vue 3 をサポート | Amazon Web Services
JavaScriptフレームワーク「Vue 3」と「Nuxt 3」の活用一覧
2021-08-10のJS: pnpm 6.12.0、webpack 5.49.0(import http resource)、Vue 3.2
【完全解説】create-vueでVue3プロジェクト作成〜Vite爆速開発〜 | アールエフェクト
Vue 3 is now in RC! · Issue #189 · vuejs/rfcs
既存のVue.jsプラグインがVue 3で使えない場合の対応 - Qiita
2024-09-09のJS: Vue 3.5、jsprimer v6、a11y-visualizer
6歳娘「パパ、Vue3のComposition APIってどう使うの？」 - Qiita
Vue3でフォームバリデーションのVee-Validate 4の基礎を理解 | アールエフェクト
Quasar + Vite + TypeScript で始める爆速 Vue 3 開発 - Qiita
Vue.js 3 ハンズオン | Vue3 Hands-on
【他のSPAでも】Vue3でアプリ作るならこれを入れろ！2023 ver【使えるよ】 - Qiita
TypeScriptが強化されたVue3.3アップデートと将来の機能について - Qiita
2021-06-08のJS: Lighthouse 8.0.0(スコア計算の変更)、Vue 3.1(@vue/compat)、 Mocha v9.0.0
2022-01-24のJS: Safari TP 138、Vue 3のデフォルト化、Remix vs Next.js
MedPeerをVue 3にアップデートしました🥳 - メドピア開発者ブログ
Vue3でモーダルダイアログの起動をいい感じに実装する | フューチャー技術ブログ
Vue3のテンプレート内でES2020構文が使えない原因 - Qiita
既存のVue.jsプロジェクトをVue 3へ移行したときに必要だった修正まとめ - Qiita
【日本語版】All we know about Vue 3's Vapor Mode - Qiita
Vue3 + TypeScript + Tailwindの環境構築
Vue 3 / Vuetify 3 に備えてまず Vite への移行をお勧めしたい
Vue3 チュートリアル 1 環境構築 - Qiita
Vue 3の開発を半年経験してみて学んだこと、感じたこと
Vue3のcomposition-apiで金魚を大量に泳がせたのでソースと解説 - Qiita
Top problems I got switching to Vue 3 – Ghiura Alexandru