JSer.info #614 - Bun v0.2.0がリリースされています。 Release Bun v0.2.0 · oven-sh/bun 0.2.0ではbun --hotでのHot Relaodingの対応、Bun.spawnの追加、ReadableStreamのサポート改善、package.jsonのimportsフィールドのサポートなど含まれています。 monorepo管理ツールのlerna v6.0.0がリリースされました。 Release v6.0.0 · lerna/lerna デフォルトでlerna runにNxを使うように、lerna add-cachingコマンドの追加、lerna repairコマンドの追加などの変更が含まれています。 内部的にNxを使うようになったため、Nxの機能であるリモートキャッシュなども利用できるようになっています。 Lerna rebor
Nuxt Bridge を活用して Nuxt 3 へ移行しました 業務委託で STORES の開発をしている @inouetakuya です。 以前 STORES が Nuxt Bridge を活用して Nuxt 3 への移行を進めている旨の記事を wattanx が書いてくれました。 Nuxt 3 への移行に向けて頑張ってます - STORES Product Blog そして先月（2024年7月）ようやく Nuxt 3 へ移行することができましたので、本記事は前回の記事の続編にあたります。 Nuxt Bridge とは おさらいになりますが、Nuxt Bridge とは Nuxt 3 の機能の一部を Nuxt 2 でも利用できるようにしたライブラリです。これを活用すると Nuxt 2 のプロジェクトのまま Nuxt 3 の機能を利用するようコードを変更でき、Nuxt 3 へのバージョン
[Vue]Composition API + Yupを利用したフォームのバリデーション | DevelopersIO
t_o_dと申します。 フォーム検証は非常に重要な処理ですが、厳格かつ適切に実装しようとなると相応の知識が必要となり、大抵の開発ではライブラリを用いることが多いです。 今回はYupというライブラリを利用してVue.js(Composition API)で実装する方法を記録いたします。 結果 今回は以下のバリデーションができる入力フォームを作成していきます。 テキストボックス セレクトボックス ラジオボタン 必須入力だけではなく、形式チェックもYupの機能を利用いたします。 全て通ったらエラーメッセージが消え、送信処理が送れます。 環境 mac OS Monterey 12.2 Node.js v18.0.0 Vue 3.2 手順 Vue3 + yup環境構築 以下のコマンドをうち、Vue3及びyupを利用できるサンプルプロジェクトを作成 # サンプルプロジェクト作成 npm init vi
![[Vue]Composition API + Yupを利用したフォームのバリデーション | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/7b6a8966a1dd73d823a42e9559be0cc1bcdb76ea/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2021%2F08%2Fvuejs-logo.jpg){kind=logo}
ViteでPreactのTypescript環境を構築するNo bundleツールのViteを使って、TypescriptベースのPreactの環境を構築します。ESLintやPrettierの設定もあわせて行います。 はじめにVite は Vue.js の作者の Evan You 氏が開発しているビルドツールです。 ネイティブの ES Module のインポートを利用し、バンドル不要で高速に動作する開発環境を提供します。 Vue3 はもちろん、React や Preact も対応しています。 今回はそんな Vite を使って、Preact プロジェクトの環境構築をします。 できあがったテンプレートはこちらにあります。 やることpreact/cli の default テンプレートに近づけることを目標に、最低限開発に必要なツールを導入していきます。 ツールを個別に導入できるよう、それぞれ順
【フロントエンド】駆け出しエンジニアが目指すジュニアレベルのエンジニアとは【2024年版】 - Qiita
はじめに こんばんは。 駆け出しエンジニア真っ只中のmamiと申します。 最近ようやく業務にも慣れてきたタイミングで、自分のエンジニアとしてのレベル感や、この先目指すべき道筋を明確にしたいな〜という思いでこの記事を書いております。 これは自分のための記事であると同時に、同じように駆け出し中のエンジニアさんや、ミドル層を目指す手前のエンジニアさんにも刺さる内容になっているかと思います。 今、自分がどのようにキャリアアップしていくべきなのか、どのような道筋でスキルを磨いていけばいいのか。そんなふうに悩んでいる方は是非読んでみてください。 ※内容はフロントエンジニアが対象になりますが、バックエンドの方もなにか通じるものがある…かもしれません。 逆算したキャリア戦略の必要性 そもそも何故、キャリア戦略が必要なのかについてお話しします。 結論からお話しすると、時間は有限だからです。 おそらく、何も意
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
Vite だけではサポートできないブラウザのための @vitejs/plugin-legacy プラグイン紹介と注意点
こんにちは。UIT開発推進部 Platform開発チームの odan です。LINEログインのフロントエンドおよび LIFF の SDK の開発を担当しています。 背景 LINEログインにはいくつかのバージョンがあり、その中の v2.1 のフロントエンド実装に使用しているフレームワークを Vue2 から Vue3 へのアップグレードを行っています。 現在のプロジェクトは Vue CLI を使用してプロジェクトを構築しており、 Vue3 にアップグレードするにあたって Vite への移行も同時に行っています。 Vue CLI は Webpack をベースとしたビルドシステムです。Vite への移行は Webpack との差分を気をつける必要があります。 この記事ではその差分の中でも Vite が標準でサポートしないブラウザへの対応に焦点を絞って事例を紹介します。 Vite がデフォルトでサポ
はじめに Nuxt.js(以下Nuxt)は、Vue.js(以下Vue)をサーバーサイドで動かす目的以外にも、ディレクトリ構造やVueエコシステムのライブラリがセットになっているため、設計の工数を削減する目的で採用するケースもあると思います！ お中元に迷ったときのヨックモックみたいですね😊 本記事では、Nuxtのディレクトリ構造を土台とし、Vueのコンポーネント設計について、各レイヤー（ディレクトリ）のコンポーネントが担うべき責務をまとめました。 Vue3.0がやってくると、Composition API 導入に伴い設計のベストプラクティスが変化すると思いますが、Vue2系を触ってきた個人的な総括の気持ちで書いています。 Vueコンポーネントの基本とNuxtでの例 Vueコンポーネントは下記図のように、ツリー状にネストし構築されていきます。 ※Vue.js公式サイト コンポーネントによる構
同じページに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
Nuxt3入門(第8回) - Nuxt3のuseStateでコンポーネント間で状態を共有する | 豆蔵デベロッパーサイト
前回はNuxt3でプラグイン、ミドルウェアの導入について見てきました。 今回はNuxt3が提供する状態管理について見ていきます。 Nuxt2では、コンポーネント間で状態を共有するには、Nuxt2にバンドルされているVuexを使うのが一般的でした。 Nuxt3ではVuexはNuxt本体に含まれていません。 代わりにNuxt3では新たにuseState Composableが提供されるようになりました[1]。 useStateはVuex程の機能はありませんが、必要最低限のシンプルな設計で使いやすいものとなっています。 比較的シンプルなデータ構造であったり、中小規模のアプリケーションでは十分に実用的なものとなっています。 Informationそれなりの規模のアプリケーションでは、Piniaの利用を検討すると良いかと思います。 こちらはNuxtモジュールとして提供されています。 useState
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
GitHub - xyflow/awesome-node-based-uis: A curated list with resources about node-based UIs
baklavajs - Graph/node editor for VueJs beautiful-react-diagrams - React components and hooks to build diagrams butterfly - Renderer for interactive diagrams and flowcharts cytoscape.js - Canvas based renderer with utilities and algorithms diagram-maker - Interactive editor for any graph-like data Flowy - Flowchart library flow-builder - React-based renderer for workflows and process diagrams GoJS
JSer.info #534 - TypeScript 4.3 Betaがリリースされました。 Announcing TypeScript 4.3 Beta | TypeScript 今までは、getterとsetterは同じ型であることが強制されていましたが、setterにgetterより幅広い型を指定できるようになっています。また、継承したメソッドをoverrideしていることを意味するoverrideキーワードが追加され、--noImplicitOverrideでチェックできるようになっています。 その他には、Template String Typeの改善、一部不完全だったPrivate Class Elements(fields/methods/accessors)のサポートが改善されています。 Private Class ElementsのサポートはRuntimeの変更も含まれる
破壊的変更を乗り越えてVue3移行達成した話
dummy GA 新しいURLに転送しています… https://stockmark-tech.hatenablog.com/entry/2023/12/15/110000...
Vue.js+Vuetifyでロードバイクのブランド辞典を作る① ～Vuetify導入編～ - Qiita
はじめに はじめまして。普段学生IT団体watnowに所属しており、Webアプリ開発をしている傍ら、大学のサイクリングサークルの部長を務めているものです。毎年この時期は新入生がサークルに入部してくるのですが、新入生の中には今までロードバイク、クロスバイクといったスポーツ用自転車の全く未経験という方もたくさんいらっしゃいます。 今回は、そんな彼らのロードバイク選びの参考になればという思いから、ロードバイクブランドの一覧サイトを作った所存でございます。タイトルには偉そうに「辞典」とつけておりますが、そんな大層なものではございません。 今回はVuetify導入編ということで、実際に記述したコードなどの紹介は「実装編」という形で次回記事を書きたいと思います。 完成図 今回作ったサイトは次のようなものです。 国別にリスト化して、ブランドごとに 1．ブランド名 2．フラグシップモデルの画像、モデル名、
Nuxt + Composition-API のコンポーネント設計について考えたことなど - ハードルを下げ続けるブログ@task
急にブログを書く気になったのでいっぱい更新してます。 前回の記事で Nuxt に Composition-API を導入する方法を書きました。 task-kawahara.hatenablog.com 今回は、半年間 Composition-API をつかってきて、どのように コンポーネント設計を行ってきたのかについての記事になります。 Motivation Vuex 辛い問題 Atomic Design よくわからん問題 Clean Architecture のエッセンス コンポーネント設計の方針 ディレクトリ構成 Composables Components あとがき Motivation Vuex store での Global state 管理をやめたい UIとビジネスロジックを切り離して柔軟に設計したい Clean Architecture を読んだから実践したい まずは、Vue
はじめまして、バックオフィスシステム第二グループの辻田です。 参画してからもう少しで3ヶ月目を迎えようとしています。主に運用改善系のお仕事をさせていただいていて、インフラとサーバーサイドを触ることが多いです。 今回は、わたしの大好きなNuxt.jsにいま勉強中のクリーンアーキテクチャを当てはめてサンプルを実装してみたので紹介したいと思います。業務で実際に試した内容ではないのですが、今後機会があれば挑戦したいと思っていますし、こんなことしてるメンバーもいるんだなあくらいの温度感で読んでいただければと思います。 使用技術Nuxt.js 2.14.0 TypeScript 4.0.2 SWAPI https://swapi.dev/ Vue3がリリースされたてですが、Nuxtはまだ対応中なので 2.14.0 のバージョンを使用しています。（今回紹介するのはほぼtsファイルなのであまりVueのバー
いくつかのパターンをまとめましたが、簡単な修正だけで直るケースも多いです。 ただし、基本的にはプラグイン側の修正が必要なので、ここではその修正箇所をまとめています。 目次: ケース1: this.$xxx() 系のプラグインで起きる問題 Composition APIで使う ケース2: <div v-xxx>系のプラグインで起きる問題 ケース3: コンポーネント系プラグインで起きる問題 補足1: Vue.jsとVue 3両方に対応させる 補足2: プラグインの修正ってどうやるの？ ケース1: this.$xxx() 系のプラグインで起きる問題 Vueインスタンスメソッドに機能が拡張されるタイプのプラグインで起きるのは、 プラグインのインストール時、Vueのprototypeの拡張に失敗しているという事象です。 Uncaught TypeError: Object.definePropert
【古い情報】Vue+TypeScriptをESLint+Prettierでなるべくコンパクトな設定でLint+整形する - Qiita
警告 この記事の情報は現時点では古くなっています。 ESLintとPrettierを組み合わせる場合、別の記事を参考にしてください。 例： Prettierの導入とESLintとの併用について 経緯については以下を参考にしてください。 Prettier と ESLint の組み合わせの公式推奨が変わり plugin が不要になった Vue+TypeScriptを使用したソースコードに対しESLintとPrettierを適用するにあたり、ESLint関連のパッケージそれぞれがどのような役割を持っているか調べてみると思ったよりもコンパクトな内容(plugins,parser,parserOptionsなどは指定しなくても大丈夫)でLint+整形が出来ることを確認できたため、最終的に確認できた設定と調べた内容を共有します。 動作確認はVSCodeで行っています。 事前に準備が必要なもの Vue3
JSer.info #540 - 現在のLTSの最新版であるNode v14.17.0がリリースされました。 Node v14.17.0 (LTS) | Node.js Node v14.17.0では、Node.js 15.x で追加された機能やモジュールがバックポートされています。 診断情報を扱うdiagnostics_channelモジュールの追加、UUID v4を生成するcrypto.randomUUID()が追加されています。 crypto.randomUUID() はWHATWGで定義されている仕様で、Chromeにも実装が追加されています。 WICG/uuid: UUID V4 crypto.randomUUID() - Chrome Platform Status また、--experimental-abortcontrollerの実験フラグ付きですが、AbortContro
Let’s be honest, reading documentation is not something that most of us enjoy, but when working with a modern front-end framework like Vue, which is constantly evolving, a lot of things change with every new release and you might have missed some of the new and shiny features that were later introduced. Let's take a look at those interesting but not so popular features. Keep in mind that all of th
CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。
Capacitorプラグインで実現する、Nuxt 3のハードウェア連携 - hacomono TECH BLOG
はじめに こんにちは、hacomonoでウェブアプリケーションの開発を担当しています、野崎です（社内ではサイモンと呼ばれています）。 少し前に、Nuxt 3とCapacitorで作るiOSアプリの記事をパブリッシュしており、今回はその続きです。Capacitorで構築したiOSアプリから外部ライブラリをプラグイン化して呼び出すという話をします。 併せて読んでいただけますと、より理解しやすくなりますのでそちらもご参考ください。 techblog.hacomono.jp 前提条件 hacomonoのPOSレジとは hacomonoではフィットネスクラブやジムの店舗管理システムと連動して使えるPOSレジを開発、提供しています。 POSレジ自体のコンテンツはあくまでウェブアプリケーションとして構築されており、WebViewを介して画面操作が可能となっています。 iOSアプリ周辺のアーキテクチャを図
今回使った技術 Vue3 Nuxt3（ベータ版） TypeScript ある日の我が家 娘「ねぇ、パパ！」 娘「Vue3の、Composition APIの使い方を教えて！」 ワイ「おお、ええで〜」 ワイ「ほな、試しにこんな感じのページを作っていくで！」 娘「わー、数をカウントできるページなんだ！」 娘「便利そう〜！」 娘「しかも、2倍の数も確認できるんだね！」 ワイ「げへへ、照れるでぇ」 ワイ「ほな、さっそく作っていくで〜」 カウンターを作っていく ワイ「まずは、カウンターの数値が今いくつなのか」 ワイ「その状態管理をせなあかんから」
Today we are happy to announce the (long overdue) 1.0 release of VitePress! VitePress is a Static Site Generator (SSG) designed for building fast, content-centric websites. In a nutshell, VitePress takes your source content written in Markdown, applies a theme to it, and generates static HTML pages that can be easily deployed anywhere. VitePress is built on top of Vite and Vue, and is the spiritua
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のユースケー
Next.jsで勤怠管理システムを作ってみた
# Next.jsで勤怠管理システムを作ってみた お久しぶりです。 忙しさを言い訳にだいぶ更新をサボってしまってました(;^_^A汗) さて、僕はフリーランスエンジニアなんですけど、主に 準委任契約 でお取引させていただくことが多く、 勤怠表の提出を求められる立場でして。 今までは取引先さんの提供するWebシステムにポチポチ入力するだけだったんですけど、 そういったものを提供していない会社さんとお取引させていただく場合、 Excelに作業実績を記入していく という方法を取っていることが多いと思うんですが... . . . そんなんめんどいですぅ～～ｗｗｗ っていうかぼくのPCにExcelはインストールされてませんから～～～ｗｗｗ ってことで、 勤怠管理をシステム化しよう計画 を立ち上げました。 # 技術選定 表題の通り、今回は前々から勉強しようと思っていた React で開発をすることにし
Vue.jsに限らずアプリケーションに入力フォームを追加した場合には必バリデーション機能を実装する必要があります。バリデーションはユーザが入力フォームから入力した値がアプリケーションの要件を満たしているかチェックを行う仕組みです。例えばネット上のサービスを利用する場合にはメールアドレスの入力を求められます。入力後にメールアドレスの形式になっているかどうかチェックを行うのがバリデーションです。 フォームバリデーションには入力値をチェックするだけではなくエラーメッセージの管理、入力したデータの管理、submit処理(サーバに)など含まれ、すべて自分で実装しようとすると非常に大変な作業になります。vee-validateなどのライブラリの力を借りることでフォーム作成の負担を下がることができフォーム以外の処理に時間をかけることができます。ライブラリを利用することで自分で実装することに比べて楽にはな
【Vue.js】Composition APIを使用した共通関数の作り方 - プログラマーノート
はじめに mixisは共通関数としてどうなのか vue.jsで共通関数をどう作るか 共通関数のメリット Composition APIで使用可能 オブジェクト指向的に考えられる どこから呼び出したのか分かりやすくなる まとめ はじめに こんにちは。エンジニアの仕事をしている、たかふみです。 本日は、vue3より正式導入された、Composition APIを使用した共通関数の作り方についてまとめたいと思います。 Composition APIを共通化する際に、参考としてください。 mixisは共通関数としてどうなのか vue.jsには、mixinsという機能がありますが、mixinsには以下のデメリットがあります。 Options APIで動く想定なのでComposition APIでは使いにくい。 オブジェクト指向的に考えると複数のインスタンスを持てない。 グローバル定義した場合、どこで
Storybook 6.3
Storybook is the industry-standard UI development workshop for components and pages. It's used by Dropbox, Shopify, Stripe, and thousands more teams. Developers choose Storybook because it helps them focus on one thing: the user interface. There's already a mountain of complexity in app development, Storybook makes your job simpler by isolating UI concerns from the noise of backend, APIs, and data
JSer.info #587 - TypeScript 4.7 Betaがリリースされました。 Announcing TypeScript 4.7 Beta - TypeScript TypeScript 4.5 Betaで導入されNightlyでテストされていた、Node.jsのECMAScript Moduleサポートを再び有効化されています。 これに関連してpackage.jsonのexportsフィールドのサポート、"module": "nodenext"、.mts/ctsの拡張子のサポートが追加されています。 また、Node.jsではファイルがモジュールかどうかはpackage.jsonのmoduleフィールドなどによって暗黙的に異なります。 そのため、ファイルがモジュールかどうかを判定方法を制御できるmoduleDetectionオプションも追加して、強制的(force)にモジ
React Native製、予定作成アプリ「ペペロミア」を公開しました 以前記事にしたペペロミアが公開してから1年経ったので振り返りも兼ねて記事にまとめてみました。 個人プロダクトのアーキテクトとかの参考になれば良いかなと思います。 主に使用している技術 アプリ Expo(React Native) Backend Golang Web版 Nuxt.js ヘルプサイト Gatsby.js LPページ React その他の使用技術 /ツール TypeScript Firebase Figma GraphQL GitHub Actions MDX SwaggerHub GitHub 前はモノレポで1つのRepositoryで全Sサービス管理していたが、各サービスごとにわけるようにしたので以下の通りです。 Peperomia PeperomiaBackend PeperomiaWeb Peper
2020/05/15 (更新日: 2020/06/10) 【保存版】Vue.js入門【特徴・メリットから基本的な使い方まで】JavaScript そんな疑問にお答えします。 Vue.jsは今とても勢いのあるJavaScriptフレームワークです。この記事では、初心者にも分かりやすいようにVue.jsのメリットやjQuery・Reactとの違い、基本的な使い方までを詳しく解説していきます。 長い記事になってしまったので、必要な部分や知りたいと思った内容から読んでいただければ幸いです。 Vue.js公式サイト はじめにまずはじめに、この記事のターゲットや取り扱う範囲について書いていきます。 この記事のターゲットこの記事では、下記のような方をターゲットとしています。 Vue.jsがどんなものか知りたい人Vue.jsの基本的な使い方を知りたい人JavaScript、jQueryを学んで先に進みたい
Dynamically Switching From One HTML Element to Another in Vue | CSS-Tricks
Dynamically Switching From One HTML Element to Another in Vue A friend once contacted me asking if I had a way to dynamically change one HTML element into another within Vue’s template block. For instance, shifting a <div> element to a <span> element based on some criteria. The trick was to do this without relying on a series of v-if and v-else code. I didn’t think much of it because I couldn’t se
Vue.js JWT Authentication with Vuex and Vue Router - BezKoder
Overview of Vue JWT Authentication example We will build a Vue application in that: There are Login/Logout, Signup pages. Form data will be validated by front-end before being sent to back-end. Depending on User’s roles (admin, moderator, user), Navigation Bar changes its items automatically. Screenshots – Signup Page: – Login Page & Profile Page (for successful Login): – Navigation Bar for Admin
この記事は「NEXTSCAPE Advent Calendar 2021」の12日目の記事です。 かつてVueに詳しかった人に対して、知識のアップデートをサポートします。 🐣CLI Vueのプロジェクトを新規作成する際、いちいちnpm initしたりgit initしたりnpm install vueしたりラジバンダリする輩はこの世に存在しません。 なんにせよコマンドをペチっと叩いて空のプロジェクトを作成することと思います。 テンプレート、スキャフォルディング、ボイラープレートとか呼ばれてるなにかをコマンドで生成しているはずです。 空のプロジェクト作成にはCLI（コマンドラインインターフェース）が必要であり、CLIの選択肢としてVue CLI、あるいはNuxt.jsが君臨していたことでしょう。 Vite いまは、そこんところのサポートをViteが担当してくれます。 読み方は「ヴィート」。
SolidJS の日本語ドキュメントが公開されました
SolidJS とは 最近 1.0 が公開された JavaScript の UI フレームワークです。[1] JSX テンプレート 仮想 DOM なし 事前コンパイルによって、フレームワークのコードが「消える」 パフォーマンスが高い といった特徴があります。 詳しくは公式サイトをご覧ください。 日本語ドキュメント 左側のメニュー（スマホなどの場合は右上の > ボタン）から言語を切り替えてください。[2] Get Started: https://www.solidjs.com/guide Docs: https://www.solidjs.com/docs/latest/api これらは両方とも自分が翻訳しました！🎉 翻訳について もともと 5 月くらいに SolidJS のことを知り、軽く触ってみて面白いと思っていました。 6 月末に 1.0 のリリースとともに公式サイトが公開され、リ
本記事で書かれている内容は 2021/10/21 時点の内容になります。 ベータ版のため、今後記載方法の大きな変更の可能性があります。 最新情報は Nuxt 3 公式ドキュメントでご確認ください。 はじめに 2021/10/12 Nuxt.js 3（以下 Nuxt 3）がパブリックベータ版に移行しました 🎉！ これによって誰でも触れるようになったというわけで、今回早速試してみました的な記事です。 （そしてなぜか Zenn ではあまり話題になってない…） Nuxt 3 の主な新機能 主な新機能は以下の通りです。 Nitro Engine による高速化/軽量化および Nuxt 内部での API 作成への対応 トップページの記載によれば、75 倍の軽量化が実現したそうです。 高速化に関しては数値まで公表されていないですが、実際にアプリを作成したところバージョン２とは別物レベルで早くなっていまし
これでわかるはじめてのVue CLI | アールエフェクト
Vuc CLIはメンテナンスモードに入りました。Vue3でプロジェクトを作成する場合はcreate-vueを利用することでプロジェクトの雛形を作成することができます。 Vue CLIをインストールしてVueのアプリケーションを構築してみたい、Vue CLIをインストールしたのはいいけ何をどうしたらいいかわからないという人を対象にVue CLIのインストール方法、Vue CLIを利用したVueのプロジェクトの作成、Vue CLIで作成したプロジェクト内のファイル更新までVueビギナーの方でも理解できるように可能な限り詳細に説明を行っています。動作確認にはMac OSを利用しています。 Vue CLIのバージョン4、バージョン3で動作確認を行っています。本文書の更新日の2022/01/25では最新バージョンは4.5.15でVue3を選択することも可能です。次のメジャーバージョンである5.0.0
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 クラウド技術に支えられており、プラグイン可能なモデルのため、他のプロバイダを利用するよう拡張することも
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
2022-10-19のJS: Bun v0.2、Lerna v6、ECMAScript Decorator
Nuxt Bridge を活用して Nuxt 3 へ移行しました - STORES Product Blog
ViteでPreactのTypescript環境を構築する | miyauci.me
2021-08-10のJS: pnpm 6.12.0、webpack 5.49.0(import http resource)、Vue 3.2
Nuxt.jsで学ぶ、Vue.jsコンポーネント設計の基本 - Qiita
Vue 3 is now in RC! · Issue #189 · vuejs/rfcs
2021-04-06のJS: TypeScript 4.3 Beta、hls.js v1.0.0(Apple Low-Latency HLS)、Storybook 6.2
Nuxt.jsでクリーンアーキテクチャ | MoT Lab (GO Inc. Engineering Blog)
既存のVue.jsプラグインがVue 3で使えない場合の対応 - Qiita
2021-05-18のJS: Node.js 14.17.0、TypeScript 4.3 RC(インクリメンタルビルドの改善)、Angular v12
7 Vue Patterns That You Should Be Using More Often
JavaScriptフレームワーク「Vue 3」と「Nuxt 3」の活用一覧
6歳娘「パパ、Vue3のComposition APIってどう使うの？」 - Qiita
Announcing VitePress 1.0 | The Vue Point
2024-09-09のJS: Vue 3.5、jsprimer v6、a11y-visualizer
Vue3でフォームバリデーションのVee-Validate 4の基礎を理解 | アールエフェクト
2022-04-13のJS: TypeScript 4.7 Beta、RedwoodJS 1.0、Sanitizer API
React Nativeで作ったアプリをリリースしてから1年経ったので振り返ってみる - Qiita
【保存版】Vue.js入門【特徴・メリットから基本的な使い方まで】
かつてVueに詳しかったひとに捧げる2021年末のVue - Qiita
Nuxt 3がパブリックベータ版になったので新機能の紹介や所感など
Amplify JavaScript が新たに Vue 3 をサポート | Amazon Web Services