先に結論書いてしまいますと、全部公式ドキュメントに書いてあります。 でも、書いてある箇所がバラバラなので 先に公式ドキュメントをちゃんと目を通していれば混乱しないのでしょうが、 ちゃんと読まずにいきなり現場のソースコード読んで、まぁどうにかなんだろうと思ったら ん？この <template> と <template> はなんか違うの？？ と混乱してしまった人（私です）向けにまとめました。 <template> タグには以下の役割があります。 条件付きレンダリングで複数要素を対象とする場合（v-if） リストレンダリングで複数要素を対象とする場合（v-for） 名前付きスロット（v-slot） 単一ファイルコンポーネント 条件付きレンダリングで複数要素を対象とする場合（v-if） 公式ドキュメントはこちら https://jp.vuejs.org/v2/guide/conditional.h
はじめに Vue.jsでSPAサイトを作るときにVuetifyを使ってみました。 本記事に導入方法などの記述は省きます。 開発環境 やりたいこと v-listに外部リンク(例; google.com)をつけたい。 <a>タグ使えば一瞬！なんですが、今回は極力Vuetifyで作りたかったのでソースをのぞいてみました。 方法 v-listの中に作っている、タイル（v-list-tile）にリンクを張る方法です。 外部リンクと内部リンクで書き方が若干違いました。 ここで外部リンクとは、外部ドメインのサイトで 内部リンクとはSPAの同サイト内のページを指します。 外部リンク v-list-tileタグの中に:href="URL"とすればよいです。 これで外部リンクになります。
Vuetify 2 と @vue/composition-api を使用した TODO アプリを題材に Vue CLI から Vite / Vitest への移行を試して、とりあえず動くようになったので手順と設定を共有したいと思います。 ビルド速度やサイズの変化についてはこの記事の後ろにまとめてあります。 使用したコードは次のリポジトリにあります。 なお、この記事に記載している情報は 2022 年 1 月 30 日時点のものです。 記事の内容はあくまで一例であり、手順や設定が正しいものであるという保証はありませんのでご注意ください。 移行を試した背景 2022 年 1 月 18 日に Vue CLI がメンテナンスモードに入ったことが宣言されました。 1 Vue CLI 自体は引き続き利用可能で v5 安定版リリースに向けて作業が続けられています。 2 とはいえ今後の主流は Vite にな
Type checking is a tricky concept in Vue. While it’s easy to do in plain script files, Vue single-file components are a much trickier beast to get working. While some choose TypeScript, perhaps for class-based components, others find TypeScript’s heavyweight nature and difficulty to integrate with common tools to not be worth the effort. Facebook’s Flow is a typechecker that fits much better into
2系の時は こちらの記事を参考にさせて頂いたのですが 3.0.0-beta.10 の場合を調査したので備忘録で残しておきます。 前提 @vue/cli 3.0.0-beta.10 以下の構成で動作確認をしました。 参照記事 Flow導入時に最初にやることまとめ Flowの速い環境変化 追加するパッケージ flow-typed @babel/preset-flow eslint-plugin-flowtype eslint-plugin-flowtype-errors flow-bin # flow-typed npm install -g flow-typed # 各パッケージ npm install --save-dev @babel/preset-flow eslint-plugin-flowtype eslint-plugin-flowtype-errors flow-bin
Wails v2 turns what used to be tedious and painful into a delightfully simple process. Use the tools you know to create cross-platform desktop apps. Everyone wins!— Brian Ketelsen Co-author of "Go In Action" Feature RichBuild comprehensive cross-platform applications using native UI elements such as menus and dialogs.
When trying to insert a script tag into the <template> tag of a Vue component the following error is emitted. - Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed.One could ask, why would you event want to include a <script> tag inside a template in Vue. The reason why I stumbled
最終更新日: 2021年5月22日 グローバル設定Vue.config は Vue のグローバル設定を含んでいるオブジェクトです。あなたのアプリケーションが読み込まれる前に、下記のプロパティを変更することができます: silent 型: boolean デフォルト: false 使用方法: Vue.config.silent = true すべての Vue のログと警告を抑制します。 optionMergeStrategies 型: { [key: string]: Function } デフォルト: {} 使用方法: Vue.config.optionMergeStrategies._my_option = function (parent, child, vm) { return child + 1 } const Profile = Vue.extend({ _my_option:
「VueToolbox」は、Vue.jsに関係するフレームワーク・コンポーネント・ジェネレータ・ユーティリティなどの各種リソースがまとめられているサイトです。 サイトでは下記5カテゴリーに大きく分類されているのに加えて、例えば「Frameworks」であれば「Admin Template」「Component Collections」「Desktop」といったように、さらにその中でも分類化されているので目的のリソースも探しやすくなっています。 Frameworks Integrations UI Components UI Utilities Utilities 子カテゴリーの一覧ではリソース名と概要が記載されたものが並べられています。 また、一覧の右上で並び順の切り替えができるようになっており、最後のコミットがいつされたかやnpmでのダウンロード数などを基準にできます。 詳細ページでは「
2018年7月9日Vue,vue-thin-modal,ライブラリ去年から作っていた Vue のモーダルコンポーネント vue-thin-modal の v1.0.0 をリリースしました。仕事でも結構使っていて、特に大きな問題もなく、API も安定しているのでメジャーバージョンを上げました。 vue-thin-modal は世の中の多くのつらいモーダル実装を見て、つらくならなくするために作ったライブラリです。主に以下のような特徴があります。 モーダルはどこに置いても DOM の実態は <body> 直下にマウントされる (いわゆる Portal)。 モーダルが開くと通常のコンテンツ部分はスクロールが止まる。モーダル内のコンテンツがウィンドウサイズを超えてもスクロールできる。 これで発生する、スクロールバーが消えることによるガタツキを防ぐ実装もしている。モーダルを閉じたときに元のコンテンツに
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
