タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
「Vue 3」は、JavaScriptフレームワークVue.jsの次期バージョンで、2016年にリリースされた「Vue 2」以来のメジャーバージョンアップです。Vue 3で導入される新機能のうち、前回は新しいコンポーネント記述形式「Composition API」を紹介しました。今回は、それ以外の主な新機能を説明していきます。 はじめに Vue.jsは、Webページのユーザーインタフェース（UI）を構築できるフレームワークです。2015年のバージョン1（Vue 1）、2016年のバージョン2（Vue 2）に続き、バージョン3（Vue 3）が開発中で、2020年第2四半期にリリース予定です。 前回記事ではコンポーネントの新しい記述形式「Composition API」を紹介しましたが、他にもさまざまな新機能がVue 3で導入されます。本記事では、それ以外の主な新機能を抜粋して紹介していきます
ファビコンを環境ごとに変えると分かりやすい（Next.js, Vue3, SvelteKit, Astro） - Qiita
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.
JSer.info #625 - 2022 Year In Review | The Vue Pointという記事では、Vue 2のEnd of Life (EOL)が改めて周知されています。 Vue.js - Vue 2 LTS, EOL & Extended Support Vue.js 2は2023年12月31日にEOLとなり、サポートが終了されます。 サポート終了後はセキュリティリリースも行われなくなる予定です。 NextAuth.jsがAuth.jsの一部という扱いに変更されました。 これによって、SvelteKitやSolidStartでもNextAuthが実装していた認証、認可の仕組みが利用できるようになっています。 React NativeがTypeScriptをFirst-classとしてサポートすることが発表されました。 First-class Support for
Nuxt.js(Vue.js)SSRのライフサイクルを完全に理解したい(wip) | miyazaki develop log
const app = createApp({ // ... }); app.mount('#app');
【Nuxt.js】Vue.jsをより効果的に使えるフレームワークのメリットや利用シーンを紹介！｜Udemy メディア
システム開発 2019/09/20 【Nuxt.js】Vue.jsをより効果的に使えるフレームワークのメリットや利用シーンを紹介！ Nuxt.jsとは、Webアプリ開発の機能が最初から組み込まれているVue.jsベースのJavaScriptフレームワークです。2017年以降、爆発的に普及しています。今回は、Nuxt.jsのメリットや利用シーンについてお伝えします。 Nuxt.jsとは？ Nuxt.jsとは、Vue.jsベースのJavaScriptのフレームワークで、「ナクスト」と読みます。React.jsベースのサーバーサイドレンダリング(以下SSR)用フレームワークであるNext.jsに触発されて作られました。 UIなどフロントエンド向けのフレームワークであるVue.jsに対し、UI以外の部分でWebアプリケーション開発に必要な機能が最初から組み込まれています。 Nuxt.jsは、ホテル
【Vue.js】Vue CLIで作成したページのtitleとdescriptionを変更する方法 - Qiita
Vue CLIで作成したページはデフォルト状態だと、titleはプロジェクト名で全ページ共通。descriptionは存在しない状態になっている。 各ページ毎に個別のtitleとdescriptionを設定する手順について実例でまとめています。 目次 作業手順 ルートにmetaフィールドを追加 共通コンポーネントapp.vueにtitleとdescriptionをセットするメソッドを追加 共通コンポーネントapp.vueにmountedオプションをセット 共通コンポーネントapp.vueにwatchオプションをセット 共通テンプレート(pubulic>index.html)にdescription属性を追加 確認用ソースコード （参考）Vue CLIによるWEBページの作成方法 Vue CLIでWEBページを作成する方法 作業手順 ルートにmetaフィールドを追加 共通コンポーネントapp
Vue I18nは、Vueアプリケーションを国際化(多言語対応)させるためのプラグインです。簡単なVueアプリケーションで、このプラグインを試してみましょう。 01 Vueプロジェクトのひな形作成とVue I18nのインストール ひな形にするプロジェクトは、Vue CLIを用いて単一ファイルコンポーネントとしてつくることにします(「Vue CLI 3入門」参照)。コマンドラインツールから、vue createにつづけてプロジェクト名(今回はvue-i18n-test)を打ち込めば、その名前のフォルダにファイルがつくられます。
そこで、次のようなテンプレートを使用して簡単なラッパーコンポーネントを作成しました。 <wrapper> <b-table v-bind="$attrs" v-on="$listeners"></b-table> </wrapper> $attrsと$listenersを使用して、小道具とイベントを伝えます。 正常に動作しますが、ラッパーはどのようにして<b-table>名前付きスロットを子にプロキシできますか？ Vue 2.6（v-slot構文） 通常のスロットはすべてスコープスロットに追加されるため、これを行うだけで済みます。 <wrapper> <b-table v-bind="$attrs" v-on="$listeners"> <template v-for="(_, slot) of $scopedSlots" v-slot:[slot]="scope"><slot :name
BuefyはBulmaというUIコンポーネントセットをベースにしたVue.js用のUIコンポーネントセットです。Bootstrapのようにあらかじめ用意されたHTMLタグやCSSクラスを使うことで簡単にそれなりの見た目になります。ここでは、Vue.jsアプリでBuefyを使えるようにするための準備手順と、最後にmarginやpadding用のクラスをBeufyに追加する方法をメモします。 できるようになること 以下のGIF画像のように、csvファイルをドロップすると、csvファイルの中身がテーブル表示されます。 アップロードしたcsvファイルの中身は以下です。 前提と環境 ここでは、Nuxt.jsにnuxt-buefyをインストールして使っている前提ですが、おそらくVue.jsや他のコンポーネントセットでも対応を見れば分かると思います。ただし、エラー処理などは実装しておりませんのでそれら処
【Vue.js】Vue Router上でコンポーネントに値を渡す前に非同期処理の完了を待たせる 2020年2月6日 2023年10月23日 Vue Vue RouterはVue.jsの公式のルーターライブラリです。SPA（シングルページアプリケーション）的にVue.jsでサイトを構築するならまず出番があります。 紹介 ｜ Vue Router Vue Routerのルーティングでは次の様にパラメータを遷移先ページコンポーネントに渡します。 const options: RouterOptions = { mode: 'history', routes: [ { path: '/user/:id', name: 'userShow', component: Show, props: (route)=> { return {id: route.params.id}; }, }, ], }; e
DOMとは DOMとは、マークアップ言語(html, xml)を、プログラミング言語によって、操作することでWebページの見た目を変化させることができる仕組み。 仮想DOMとは 先ほどのDOMツリーを内容の更新時に全て読み込むのではなく、はじめに全て読み込んだ後は更新した差分のみを仮想のDOMツリーに追加する。 そうすることで、よりリアクティブにwebページに反映することができる。 Vue.jsとは 一方向での、JavaScriptオブジェクト(データ)とDOM要素のやりとりではなく、双方向にすることでよりリアルタイムでスピーディにデータのやり取りを実現できる、JavaScriptのライブラリ。 双方向でのデータのやり取りをするための仲立ちをするのが、Vueインスタンス(ビューモデル)。 Vue.jsのライフサイクル Vue.jsの機能を反映させるためには、Vueインスタンスが生成された後
【Vue.js】Vue CLIでVue.jsを動かす〜ビルドまでの流れ、生成されたファイルの構造について - Qiita
【Vue.js】Vue CLIでVue.jsを動かす〜ビルドまでの流れ、生成されたファイルの構造についてJavaScriptVue.jswebpackvue-cli 前回記事の続きです。 【Vue.js】Vue CLIでVue.jsを動かす〜プロジェクト作成まで 今回は、vue initで生成されたプロジェクトの中を確認してみます。 以下の項目を中心に、順番にたどりながら進めたいと思います。 作成したファイルがどういう流れでビルドされて、そのためにはどういった設定が必要か、概要を確認します。 生成されたディレクトリ・ファイルの概要 エントリポイントとbundleファイルの出力先 ビルドとローカルサーバ（開発用サーバ）の起動について 描画されるファイルのつながり ディレクトリ構造 $ cd my-app $ tree -L 1 . ├── README.md ├── build // ビルド
GitHub - ssleptsov/ninja-keys: Keyboard shortcuts interface for your website. Working with static HTML, Vanilla JS, Vue, React, Svelte.
A lot of applications support a common pattern where the user hits ⌘+k (or ctrl+k) and a search UI dialog appears. I've recently seen this in Notion, Slack, Linear, Vercel and Algolia, but I'm sure there are plenty more. Apple Spotlight, Alfred and the Raycast app also have a similar pattern, but with different shortcuts. There are already some libraries built for this, but they are too framework
【Vue.js】vue-routerの動的URLでパラメータが変わった時、ライフサイクルフックは呼ばれないので注意 - Qiita
import Vue from 'vue'; import Router from 'vue-router'; import Home from './views/Home.vue'; import Users from './views/User.vue'; Vue.use(Router); export default new Router({ mode: 'history', routes: [ { path: '/', component: Home }, { path: '/users/:id', component: Users } ] });
【Vue.js】vue-routerの基礎をサンプルを用いて解説
vue-routerとは？vue-routerを用いることでURLにより表示するコンポーネントを制御することができます。Vue.jsでシングルページアプリケーションの構築する場合には必須といっていいほど利用されています。 vue-routerの基礎的な部分を以下のサンプルを用いて説明していきます。 vue-routerの導入方法インストール次のコマンドでインストールします。yarnを使っている場合は置き換えてください。 $npm install vue-routerrouter.js の作成srcディレクトリ内にrouter.jsファイルを以下のように作成し、Routerインスタンスを作成します。 詳細は後程説明します。 import Vue from "vue"; import Router from "vue-router"; Vue.use(Router); export defau
フロント開発をする中、head要素をvueで管理する方法として、 vue-headというライブラリを導入する機会があったので、備忘録としてまとめておく。 前提 vue-routerを導入している事。 ※この記事ではvue-routerについての解説は行いません。 手順 導入自体はとても簡単。 まずはnpmコマンドでパッケージをインストール。
Vue I18nは、Vueアプリケーションを国際化(多言語対応)させるためのプラグインです。ページに表示するテキストを、ロケールに応じて切り替えられます。インストールから基本的な設定と使い方までは「Vue.js: Vue I18nでアプリケーションを多言語に対応させる」でご説明しました。本稿では、公式ドキュメントに解説が見当たらず悩んだことをふたつ紹介します。 01 プレースホルダーを多言語化する 実は、プレイスホルダーを使うことは推奨されないようです。そうはいっても、入力例を示すなど、使う場面は少なくないでしょう。ところが、つぎのように記述すると、式($t('placeholder'))がそのまま表示されてしまい、翻訳テキストが取り出せませんでした。
[Vue.js] vue-routerのhashモードとhistoryモードの違いをざっくり理解する - Qiita
vue-routerのhashモードとhistoryモードをざっくりと理解することが目的の記事です。 そもそもルーターはなんで必要？SPAについて少し補足 これはVueに限った話ではないですが、ルーターの役割は（簡単に）SPAを実現するためと言っても良いでしょう。 SPAとは 最初のリクエストで受け取ったHTML（index.html）を使いまわし、URLに対応したページをJavaScriptで動的に作成する方式です。 MPAとは SPA対してMPA（マルチページアプリケーション）と呼ばれたりします。 URLに対応したHTMLをサーバーが返してくれる従来の方式です。 hashモードではURLが下記のように表示されます。 http://localhost:8080/#/hoge ルーティングにURL hashを使用しています。 この形式で入力されるとvue-routerは、 urlの # を
![[Vue.js] vue-routerのhashモードとhistoryモードの違いをざっくり理解する - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/ec718647dd867382c59cf8a33ff7e578f7903433/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCVnVlLmpzJTVEJTIwdnVlLXJvdXRlciVFMyU4MSVBRWhhc2glRTMlODMlQTIlRTMlODMlQkMlRTMlODMlODklRTMlODElQThoaXN0b3J5JUUzJTgzJUEyJUUzJTgzJUJDJUUzJTgzJTg5JUUzJTgxJUFFJUU5JTgxJTk1JUUzJTgxJTg0JUUzJTgyJTkyJUUzJTgxJTk2JUUzJTgxJUEzJUUzJTgxJThGJUUzJTgyJThBJUU3JTkwJTg2JUU4JUE3JUEzJUUzJTgxJTk5JUUzJTgyJThCJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz1mOTEyYWYxMjM5ODY2OWU0OTRlNjZjYWJmMDYxNDE4OA%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBrb3p6enomdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWFhMTA4ZTQ0M2JiMmI1NTI2NDc2ZmQzNzI5YzQ0NDI3%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3Db46b67c7cf413b151a5f103acb8dc306)
Lazy loading and code splitting in Vue.js - Vue School Articles
While mobile-first approach becomes a standard and uncertain network conditions are something we should always take into consideration it’s harder and harder to keep your application loading fast. In this series, I’ll dig deep into Vue performance optimization techniques that we are using in Vue Storefront and that you can use in your Vue.js applications to make them loading instantly and perform
はじめに Vue.js を学習していて、動的コンポーネント(:is="")を活用して、タブ機能を作成してみました。 （Vue CLI を使用） こういうやつ↓↓ Vue CLI ディレクトリ構造 主要ファイルの記述 以下に主要ファイルのコードを記載する index.html main.js Tab1.vue Tab2.vue Tab3.vue App.vue <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel="icon" href="<%= BASE_
はじめに 現在 https://snkrdunk.com/ では、多くのWebアプリケーションにおいて、webpackを利用してマルチページアプリケーション（MPA）の構成でFrontendの実装をしています。 エントリーポイントは100を超え、その大半がVue.jsとJavaScript、TypeScriptを組み合わせて実装されています。 今回は、そんな環境の依存関係を紐解くべく調査のためのscriptを作成したお話になります。 エントリーポイントごとの依存関係をJSON形式で生成 [ { "entryPointPath": "src/entryPointA.js", "dependencies": [ "vue", "vue-router", "src/moduleA.js", "src/moduleB.js" ] }, { "entryPointPath": "src/entryP
Vueまとめパート1 こちらの記事は、Adnan Babakan 氏によりDev.to上で公開された『 Vue cheat sheet 1 』の邦訳版です（原著者から許可を得た上での公開です） 元記事：Vue cheat sheet 1 原著をベースに説明の足りない部分は適宜、追記していく予定です。 （追記・改変の許可は得ています。） Dev.toコミュニティのみなさん、こんにちは！ 私はVue.jsが大好きで書くのを楽しんでいます。この記事ではVue.jsのほぼすべての基本的な概念（公式Webサイトに基づく）を取り上げています。目次から必要なセクションに簡単にアクセスできます。 このパートではVueコンポーネントについては説明していません。 いくつかのコードサンプルは公式ウェブサイトから引用しています。Vue.jsで確認できます。1 {{ }} - 展開（Interpolation） 展
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新Vue.js「Vue 3」でコンポーネント実装法を大きく変える「Composition API」
新Vue.js「Vue 3」で便利に使えるさまざまな新機能を先取りで紹介
Nuxt.js/Vue.jsでもスワイプでページ移動したい - Qiita
2024-01-02のJS: Vue 3.4、Vue 2.xのEOL、quick-lint-js 3.0.0、AstroとDenoの2023年まとめ
2023-01-06のJS: Vue 2のEOLは2023年末、NextAuthはAuth.jsに、React NativeのFirst-class Support for TypeScript
【Vue.js】Vue2→Vue3 主な記述方法の変更点 チートシート - Qiita
【Vue.js】Vue CLI 3のプロジェクトをPWA化する | kawadeblog
News Vue.js - Vue.jsのニュースポータル MOONGIFT
Vue.js: Vue I18nでアプリケーションを多言語に対応させる - Qiita
vue.js — vue-ラッパーコンポーネント内のスロットを渡す方法
Nuxt.js（Vue.js）+ Buefy でCSVファイルをアップロードしてテーブル表示する
【Vue.js】Vue Router上でコンポーネントに値を渡す前に非同期処理の完了を待たせる
【Vue.js】Vue.jsの仕組みについて、知っておくべきこと - Qiita
Chart.js+Vue.js+Axiosを使ってグラフを描写しよう | アールエフェクト
【Vue.js】vue-headの導入について - Qiita
Vue.js: Vue I18nの公式ドキュメントに見当たらず悩んだふたつのこと - Qiita
【Vue.js】Vue CLI でタブ機能を作る（動的コンポーネント） - Qiita
TypeScriptを使って、エントリーポイントに紐づくts, js, vueの依存関係を追う
【Vue.js】Vueの基本文法をまとめてみた - Qiita
akspot.game
www.nikkei.com
tabelog.com
note.unique1.co.jp
www.hands-lab.com