Vue - Official - Visual Studio Marketplace
Vue - Official Quick Start create-vue Vitesse petite volar-starter (For bug report and experiment features testing) Insiders Program 🚀 This project is community-driven. If you would like to support this project, consider joining the Insiders Program to improve the sustainability of this project and unlock more features. Sponsors Become a sponsor Credits vscode-extension-samples shows all the know
Vue.js Piniaを使って状態管理(データの共有)を行ってみよう | アールエフェクト
Piniaとは PiniaはVue用のState Managementライブラリで複数のコンポーネントでデータを共有するために利用することができます。アプリケーションの中にStoreという場所を準備しその中にコンポーネント間で共有の必要があるデータを保存していきます。またデータを保存するだけではなくデータを更新する機能も備えています。 Piniaによるデータ管理のイメージ Vueプロジェクトの作成 Piniaを利用するためにVueのプロジェクトの作成を行います。本文書ではViteでプロジェクトを作成後にnpmコマンドでpiniaのインストールを行います。 viteではなくnpm init vue@latestコマンドを利用するとプロジェクトの作成と同時にpiniaをインストールすることもできます。 Viteによるインストール npm init viteコマンドを実行してVueのプロジェクト
【完全版】Nuxt.jsにおけるライフサイクルまとめ(SSR/SPA/SSG/layouts/pages/components別) - Qiita
【完全版】Nuxt.jsにおけるライフサイクルまとめ(SSR/SPA/SSG/layouts/pages/components別)Vue.jsNuxt はじめに Nuxtのライフサイクル記事はたくさんありますが、コンポーネント別にまとめてくれている記事がなかったため、自分用に作成しました。よく使うんですが、よく忘れるんですよね、、、。 前提 バージョン Nuxt.js 2.14.4 補足事項 nuxtServerInit store/index.jsに記述しています。 beforeEach/afterEach pluginsにファイルを作成して、nuxt.config.jsで読み込んでいます。 fetch fetchは、公式推奨のcontextなし(引数なし)と非推奨のcontextあり(引数あり)の2種類があります。その同時実行はできませんが、流れをわかりやすくするために「fetch(有
Vue3 Composition APIにおいて、Providerパターン(provide/inject)の使い方と、なぜ重要なのか、理解する。 - Qiita
Vue3 Composition APIにおいて、Providerパターン(provide/inject)の使い方と、なぜ重要なのか、理解する。JavaScriptTypeScript設計Vue.jsNuxt はじめに Composition APIで、Providerパターン(provide/inject)が、なぜ重要なのでしょうか。 Composition APIを使えば「状態やロジック」を簡単にコンポーネントの外に切り出すことができます。 しかしながら、Composition APIだけでは「ロジックや状態は切り出せても、複数コンポーネント間で共有できない」からです。 Composition APIによって、荷物をダンボールに梱包はできても、運ぶ人がいない状態です。 みなさんは、VueのProviderパターン(provide/inject)って使ったことありますか? https:/
Vue.js ディレクトリ構成 色々試してみた - Qiita
なんじゃこれ この記事はVOYAGE GROUPのサマーインターン、Treasure2018の修了生によるTreasure Advend Calendar 2018の15日目の記事として書かれています。 はじめに vue-cliを使用するとディレクトリ構成に関しても良い感じにやってくれますが、そのままでは管理が難しい部分もあります。特にcomponents以下に関しては役割別にディレクトリを分割していかないと渋くなりますよね。そこで今回は自分が今まで試してきたオレオレディレクトリ構成を紹介していこうと思います。 (ファイルは一部抜粋して掲載しています) 前提 . ├── App.vue ├── assets ├── components │ ├── modules │ │ ├── Footer.vue │ │ ├── Header.vue │ │ ├── Loa
Vueで非同期な配列をv-forする - Qiita
Vueで、ファイルを複数ダウンロードしてv-forリストレンダリングさせる機能を実装したかったのですが、少し工夫が必要だったのでメモ。 ズバリ <ul> <li v-for="attachment in attachments()"> <div>{{attachment.name}}</div> <div>{{attachment.size / 1024}} KB</div> </li> </ul> module.exports = { // 描画トリガーは親コンポーネントからの受け渡しと仮定 // result: ["aaa.bin", "bbb.bin", "ccc.bin"] props: { result: Array }, data(){ return { files: [], reset: false }; }, method: { attachments(){ if(!thi
Vueのデータバインドの基本 - Qiita
こんな方に向けて書きました 自作コンポーネントでv-modelしたいけどやり方がわからない Avoid mutating a prop directlyのメッセージが出た！ 「イベントでやり取りする」ってどういうことよ 同様の説明をしている記事を見つけたのでこちらも参考にしてみてください: https://se-tomo.com/2018/11/03/vue-js-コンポーネント間の通信/ おさえておきたい基本のしくみ Vueは気軽に使い始められるところがいいところで、ガイドを読み飛ばしてもそれっぽく使えてしまいます。 ですがガイドには結構重要なことが書いてあるので、本当は全部読んだ方がいいです(そういう私も全部は読んでいませんが)。 一方で完全な初学者〜ちょっと使い慣れたくらいでは、ガイドをちゃんと理解しながら読むのは難しいかもしれません。 そこでデータバインドの基本を押さえるにあたって
「vuejs-paginate」でページネーション を実装する
導入手順 管理人が行った、動作確認サンプルを実装するために、以下の手順でソースコードを導入していきます。 今回のサンプルはBootstrapベースのページネーションを実装します。 ライブラリの呼び出し まずライブラリを呼び出す為に、以下の２通りの呼び出しを選択します。 コンパイラを使用しない場合は、UMDを使ってください。 ES6等で実装する場合 import Paginate from 'vuejs-paginate' Vue.component('paginate', Paginate) UMDで実装する場合 Vue.component('paginate', VuejsPaginate) ページネーションメソッドを設定 サンプル用にforを使って、リスト用の配列itemsを設定します。 dateのperPageに1ページに表示するアイテム数を設定します。 またitemsにリストを設定
無料で Vue.js + express で作った API を Azure Static Web Apps でホストしてみよう - Qiita
無料で Vue.js + express で作った API を Azure Static Web Apps でホストしてみよう Build 2020 見てたら Azure App Service Static Web Apps が公開されました。現在は public preview ですが、Azure Functions と統合されていて API も統合されているのは便利そうだなぁと思いました。控え目にいって最高！ Cosmos DB も 5GB で 400RU(性能の指標です) まで無料なのでフロントから API とデータを保存するところまで全部無料でいけるようになったのは大きいですね。 今回やりたいこと 今回は、Azure App Service Static Web Apps (長いので Static Web Apps って書きます）に Vue.js のアプリをデプロイしつつ API
Vue.jsのユニットテスト環境作成方法と見るべきドキュメント | DevelopersIO
はじめに おはようございます、加藤です。Vue.jsのユニットテスト環境作成の方法をまとめました。もし、このブログが公開から時間が経っているなら情報が古い可能性が高いです、ご注意ください。 なぜわざわざこんな事を言うかというと、私がこのブログを書いた理由は簡単に環境作成できるにも関わらず古い情報にぶつかって無駄に時間を溶かしたからです。。。 tl;dr Vue.jsのユニットテストの導入方法 マウンティングオプションは mount と shallowMount どちらを使うべきか 見るべきドキュメント 環境作成までがメインでユニットテストの作成方法についてはどのドキュメントを何の為に読んだかをまとめています。 ブログを書く経緯 最近Vue.jsの基礎を勉強したので自主4連休中に、Techpitで販売されているVue.js/Vuexを使ってTrello風アプリを作成しよう！を買ってサンプルア
Vue開発者のためのVue.jsベストプラクティス集15選 - Qiita
はじめに みなさん、Vue使ってますかー！・・・・・・・（へんじがない。ただのしかばねのようだ。） 私は毎日使ってます。が、正しい使い方というのがいまいちわかっていません。ということで、ネットで拾ってきた情報を元にVueで開発する上でのベストプラクティス集15選をまとめてみました。 「ふんふんそうだよね〜」といったものから「えー！？そうなのー！？」となるものまで集めています。皆さんの開発の手助けになる情報が入っていると幸いです。 また、間違っている内容やさらに良い方法等あれば、コメント欄にて（優しく）ご指摘いただけるととても嬉しいです。 1. v-for内では必ず:keyを使う v-forディレクティブでkey属性を使うと、データを操作するのに役立ちます。さらに、Vueがコンポーネントの状態を追跡し、それぞれのエレメントに対し継続的に参照ができるようになります。 特に、アニメーションやVu
Vue.jsで作成された、ちょっと面白くて役立ちそうなサービス - Qiita
こちらに移行しました。(2020/05/16) 概要 Vue.jsで作成されたプロジェクトを紹介しているサイト 「made with vue.js 」があります。 面白くて役立ちそうなツールやサービスをまとめてみました。 UIコンポーネント VueSocial ソーシャルサービスのボタンを作成するVueのコンポーネント CKEditor 5 リッチテキストエディタのコンポーネント Vue.Draggable ドラッグ&ドロップのコンポーネント Vuetable 2 データテーブルのコンポーネント。demo vuejs-datepicker vueのdatepicker Kalendar Vueのカレンダーコンポーネント Vue Apexcharts SVGベースのグラフ可視化コンポーネント Vue.js Google Charts VueのGoogle Charts vue-cart ショ
Laravel+PostgreSQL+Vue.jsでSPA開発【チュートリアル】 - OPTiM TECH BLOG
はじめに 皆様こんにちは。OPTiM新卒1年目エンジニアの青木です。 前回は早押しボタンなんかを作っていました。 tech-blog.optim.co.jp 今回は、PHP フレームワークの Laravel を、PostgreSQL と Vue.js と組み合わせて作成する TODO アプリを通して紹介します。 このフレームワークらはこちらの記事でも密かに利用しています。 tech-blog.optim.co.jp OPTiMではあまり利用されていませんが、一部のアプリケーションで実利用されている箇所もございます。 PHPは昔のイメージからかなり避けられていていますが...今のPHPとそのフレームワークはすごく発展していてとても使いやすいので是非使っていただきたい！という気持ちがあります。 ですが、現状はあまり利用していただけなくて個人的には悲しい気持ちでいっぱいです。 そんなPHPですが
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
コンポーネントをキャッシュする - Nuxt.js
Vue 3 & Composition API - Expense Tracker Project
Introduction | Pinia
https://codepen.io/alvidr/pen/JBEmdR/
E-commerce website with Nuxt, GraphQL, Strapi and Stripe (1)
Slidev
Vue.js設計地図 〜設計概念の依存関係からフロントエンド設計を見つめ直す〜
