ivue 1.2.2 → 1.2.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (32) hide show
  1. package/docs/docs/.vitepress/dist/404.html +2 -2
  2. package/docs/docs/.vitepress/dist/api/ivue.html +3 -3
  3. package/docs/docs/.vitepress/dist/api/propsWithDefaults.html +3 -3
  4. package/docs/docs/.vitepress/dist/assets/{app.2nR_jJ6K.js → app.DQ9wCVNL.js} +1 -1
  5. package/docs/docs/.vitepress/dist/assets/chunks/@localSearchIndexroot.HQhVwKCx.js +1 -0
  6. package/docs/docs/.vitepress/dist/assets/chunks/{VPLocalSearchBox.DkPjtbh1.js → VPLocalSearchBox.EJpZrMkj.js} +1 -1
  7. package/docs/docs/.vitepress/dist/assets/chunks/{theme.DoTp8yA-.js → theme.BCqH7Ey3.js} +2 -2
  8. package/docs/docs/.vitepress/dist/assets/{pages_browse-code.md.D-gTrMhG.js → pages_browse-code.md.d01mQ5OL.js} +2 -2
  9. package/docs/docs/.vitepress/dist/assets/{pages_getting-started.md.COvbcFGT.js → pages_getting-started.md.g77_aCnX.js} +2 -2
  10. package/docs/docs/.vitepress/dist/assets/{pages_guidelines.md.BI1PexCc.js → pages_guidelines.md.DufOHb7U.js} +2 -2
  11. package/docs/docs/.vitepress/dist/assets/{pages_guidelines.md.BI1PexCc.lean.js → pages_guidelines.md.DufOHb7U.lean.js} +2 -2
  12. package/docs/docs/.vitepress/dist/assets/{pages_how-it-works.md.NImDvDby.js → pages_how-it-works.md.BaYaFawX.js} +2 -2
  13. package/docs/docs/.vitepress/dist/assets/{pages_how-it-works.md.NImDvDby.lean.js → pages_how-it-works.md.BaYaFawX.lean.js} +2 -2
  14. package/docs/docs/.vitepress/dist/assets/{pages_usage.md.DRJXyExt.js → pages_usage.md.Fo9SdFjd.js} +29 -29
  15. package/docs/docs/.vitepress/dist/assets/{pages_usage.md.DRJXyExt.lean.js → pages_usage.md.Fo9SdFjd.lean.js} +29 -29
  16. package/docs/docs/.vitepress/dist/hashmap.json +1 -1
  17. package/docs/docs/.vitepress/dist/index.html +3 -3
  18. package/docs/docs/.vitepress/dist/pages/advanced-usage.html +3 -3
  19. package/docs/docs/.vitepress/dist/pages/api.html +3 -3
  20. package/docs/docs/.vitepress/dist/pages/browse-code.html +6 -6
  21. package/docs/docs/.vitepress/dist/pages/getting-started.html +6 -6
  22. package/docs/docs/.vitepress/dist/pages/guidelines.html +5 -5
  23. package/docs/docs/.vitepress/dist/pages/how-it-works.html +6 -6
  24. package/docs/docs/.vitepress/dist/pages/how-its-made.html +3 -3
  25. package/docs/docs/.vitepress/dist/pages/introduction.html +3 -3
  26. package/docs/docs/.vitepress/dist/pages/usage.html +32 -32
  27. package/docs/docs/pages/guidelines.md +1 -1
  28. package/docs/docs/pages/usage.md +7 -7
  29. package/package.json +1 -1
  30. package/docs/docs/.vitepress/dist/assets/chunks/@localSearchIndexroot.yrRWVEzw.js +0 -1
  31. /package/docs/docs/.vitepress/dist/assets/{pages_browse-code.md.D-gTrMhG.lean.js → pages_browse-code.md.d01mQ5OL.lean.js} +0 -0
  32. /package/docs/docs/.vitepress/dist/assets/{pages_getting-started.md.COvbcFGT.lean.js → pages_getting-started.md.g77_aCnX.lean.js} +0 -0
package/docs/docs/.vitepress/dist/pages/usage.html CHANGED
@@ -8,17 +8,17 @@
8
8
  <meta name="generator" content="VitePress v1.3.2">
9
9
  <link rel="preload stylesheet" href="/ivue/assets/style.Dtxde_a0.css" as="style">
10
10
 
11
- <script type="module" src="/ivue/assets/app.2nR_jJ6K.js"></script>
11
+ <script type="module" src="/ivue/assets/app.DQ9wCVNL.js"></script>
12
12
  <link rel="preload" href="/ivue/assets/inter-roman-latin.Di8DUHzh.woff2" as="font" type="font/woff2" crossorigin="">
13
- <link rel="modulepreload" href="/ivue/assets/chunks/theme.DoTp8yA-.js">
13
+ <link rel="modulepreload" href="/ivue/assets/chunks/theme.BCqH7Ey3.js">
14
14
  <link rel="modulepreload" href="/ivue/assets/chunks/framework.CvEKxEoK.js">
15
15
  <link rel="modulepreload" href="/ivue/assets/chunks/index.es.CUL6WvM-.js">
16
- <link rel="modulepreload" href="/ivue/assets/pages_usage.md.DRJXyExt.lean.js">
16
+ <link rel="modulepreload" href="/ivue/assets/pages_usage.md.Fo9SdFjd.lean.js">
17
17
  <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
18
18
  <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
19
19
  </head>
20
20
  <body>
21
- <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar top" data-v-ae24b3ad data-v-6aa21345><div class="wrapper" data-v-6aa21345><div class="container" data-v-6aa21345><div class="title" data-v-6aa21345><div class="VPNavBarTitle has-sidebar" data-v-6aa21345 data-v-ab179fa1><a class="title" href="/ivue/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>ivue ∞ Infinite Vue</span><!--[--><!--]--></a></div></div><div class="content" data-v-6aa21345><div class="content-body" data-v-6aa21345><!--[--><!--]--><div class="VPNavBarSearch search" data-v-6aa21345><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><span class="vp-icon DocSearch-Search-Icon"></span><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><!----><!----><div class="VPNavBarAppearance appearance" data-v-6aa21345 data-v-6c893767><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-6c893767 data-v-5337faa4 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-5337faa4></span><span class="vpi-moon moon" data-v-5337faa4></span><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-6aa21345 data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/infinite-system/ivue" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-eee4e7cb><span class="vpi-social-github" /></a><a class="VPSocialLink no-icon" href="https://x.com/evgenykalash" aria-label="twitter" target="_blank" rel="noopener" data-v-7bc22406 data-v-eee4e7cb><span class="vpi-social-twitter" /></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-6aa21345 data-v-bb2aa2f0 data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-b98bc113><!----><!--[--><!--[--><!----><div class="group" data-v-bb2aa2f0><div class="item appearance" data-v-bb2aa2f0><p class="label" data-v-bb2aa2f0>Appearance</p><div class="appearance-action" data-v-bb2aa2f0><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-bb2aa2f0 data-v-5337faa4 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-5337faa4></span><span class="vpi-moon moon" data-v-5337faa4></span><!--]--></span></span></button></div></div></div><div class="group" data-v-bb2aa2f0><div class="item social-links" data-v-bb2aa2f0><div class="VPSocialLinks social-links-list" data-v-bb2aa2f0 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/infinite-system/ivue" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-eee4e7cb><span class="vpi-social-github" /></a><a class="VPSocialLink no-icon" href="https://x.com/evgenykalash" aria-label="twitter" target="_blank" rel="noopener" data-v-7bc22406 data-v-eee4e7cb><span class="vpi-social-twitter" /></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-6aa21345 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-6aa21345><div class="divider-line" data-v-6aa21345></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-17a5e62e><button data-v-17a5e62e>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-319d5ca6><div class="curtain" data-v-319d5ca6></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-319d5ca6><span class="visually-hidden" id="sidebar-aria-label" data-v-319d5ca6> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0 collapsible" data-v-c40bc020 data-v-b7550ba0><div class="item" role="button" tabindex="0" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><h2 class="text" data-v-b7550ba0>Guide</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-b7550ba0><span class="vpi-chevron-right caret-icon" data-v-b7550ba0></span></div></div><div class="items" data-v-b7550ba0><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/introduction.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>What is ivue?</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/how-it-works.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>How it works?</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/getting-started.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Getting Started</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0 collapsible" data-v-c40bc020 data-v-b7550ba0><div class="item" role="button" tabindex="0" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><h2 class="text" data-v-b7550ba0>Usage</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-b7550ba0><span class="vpi-chevron-right caret-icon" data-v-b7550ba0></span></div></div><div class="items" data-v-b7550ba0><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/usage.html#basic-usage" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Basic Usage</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/usage.html#using-props" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Using Props</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/usage.html#using-emits" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Using Emits</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/usage.html#using-refs" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Using Refs</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/usage.html#using-define-expose" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Using Define Expose</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/usage.html#using-composables" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Using Composables</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/usage.html#using-inside-composables" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Using Inside Composables</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/usage.html#using-computeds" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Using Computeds</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/usage.html#using-watch" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Using Watch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/usage.html#using-lifecycle-hooks" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Using Lifecycle Hooks</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/usage.html#using-pinia-store" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Using Pinia Store</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/usage.html#using-quasar-framework" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Using Quasar Framework</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0 collapsible" data-v-c40bc020 data-v-b7550ba0><div class="item" role="button" tabindex="0" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><h2 class="text" data-v-b7550ba0>Guidelines</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-b7550ba0><span class="vpi-chevron-right caret-icon" data-v-b7550ba0></span></div></div><div class="items" data-v-b7550ba0><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/guidelines.html#dos-and-don-ts" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Dos and Don'ts</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/guidelines.html#constructor-vs-init" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>constructor() vs .init()</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/guidelines.html#unwrapping-refs" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Unwrapping Refs</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/guidelines.html#naming-conventions" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Naming Conventions</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0 collapsible" data-v-c40bc020 data-v-b7550ba0><div class="item" role="button" tabindex="0" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><h2 class="text" data-v-b7550ba0>Advanced Usage</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-b7550ba0><span class="vpi-chevron-right caret-icon" data-v-b7550ba0></span></div></div><div class="items" data-v-b7550ba0><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/advanced-usage.html#extend-props-defaults" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Extend Props Defaults</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/advanced-usage.html#extend-props" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Extend Props</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/advanced-usage.html#extend-emits" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Extend Emits</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/advanced-usage.html#extend-slots" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Extend Slots</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/advanced-usage.html#extend-classes" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Extend Classes</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/advanced-usage.html#extend-components" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Extend Components</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0" data-v-c40bc020 data-v-b7550ba0><!----><div class="items" data-v-b7550ba0><!--[--><div class="VPSidebarItem level-1" data-v-b7550ba0 data-v-b7550ba0><div class="item" role="button" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><p class="text" data-v-b7550ba0>API</p><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0 collapsible" data-v-c40bc020 data-v-b7550ba0><div class="item" role="button" tabindex="0" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><h2 class="text" data-v-b7550ba0>Core Functions</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-b7550ba0><span class="vpi-chevron-right caret-icon" data-v-b7550ba0></span></div></div><div class="items" data-v-b7550ba0><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/api.html#ivue" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>ivue()</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/api.html#iref" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>iref()</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/api.html#iuse" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>iuse()</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/api.html#init" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>.init()</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/api.html#torefs" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>.toRefs()</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0 collapsible" data-v-c40bc020 data-v-b7550ba0><div class="item" role="button" tabindex="0" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><h2 class="text" data-v-b7550ba0>Utility Functions</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-b7550ba0><span class="vpi-chevron-right caret-icon" data-v-b7550ba0></span></div></div><div class="items" data-v-b7550ba0><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/api.html#propswithdefaults" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>propsWithDefaults()</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0 collapsible" data-v-c40bc020 data-v-b7550ba0><div class="item" role="button" tabindex="0" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><h2 class="text" data-v-b7550ba0>Utility Types</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-b7550ba0><span class="vpi-chevron-right caret-icon" data-v-b7550ba0></span></div></div><div class="items" data-v-b7550ba0><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/api.html#extractpropdefaulttypes" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>ExtractPropDefaultTypes</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/api.html#extractemittypes" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>ExtractEmitTypes</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/api.html#extendslots" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>ExtendSlots</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/api.html#UseComposable" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>UseComposable</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0 collapsible" data-v-c40bc020 data-v-b7550ba0><div class="item" role="button" tabindex="0" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><h2 class="text" data-v-b7550ba0>Source Code</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-b7550ba0><span class="vpi-chevron-right caret-icon" data-v-b7550ba0></span></div></div><div class="items" data-v-b7550ba0><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/browse-code.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Browse Code</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><nav aria-labelledby="doc-outline-aria-label" class="VPDocAsideOutline" data-v-3f215769 data-v-a5bbad30><div class="content" data-v-a5bbad30><div class="outline-marker" data-v-a5bbad30></div><div aria-level="2" class="outline-title" id="doc-outline-aria-label" role="heading" data-v-a5bbad30>On this page</div><ul class="VPDocOutlineItem root" data-v-a5bbad30 data-v-b933a997><!--[--><!--]--></ul></div></nav><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _ivue_pages_usage" data-v-39a288b8><div><h1 id="example-usage" tabindex="-1">Example Usage <a class="header-anchor" href="#example-usage" aria-label="Permalink to &quot;Example Usage&quot;">​</a></h1><p>Using ivue is very simple, but you need to understand a few principles. See the examples below expanding on each principle.</p><h2 id="basic-usage" tabindex="-1">Basic Usage <a class="header-anchor" href="#basic-usage" aria-label="Permalink to &quot;Basic Usage&quot;">​</a></h2><p>Classic Counter example built with <code>ivue</code></p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-l4p3P" id="tab-MYyFjxF" checked><label for="tab-MYyFjxF">CounterBasic.vue</label></div><div class="blocks"><div class="language-vue vp-adaptive-theme active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setup</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> lang</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;ts&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
21
+ <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar top" data-v-ae24b3ad data-v-6aa21345><div class="wrapper" data-v-6aa21345><div class="container" data-v-6aa21345><div class="title" data-v-6aa21345><div class="VPNavBarTitle has-sidebar" data-v-6aa21345 data-v-ab179fa1><a class="title" href="/ivue/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>ivue ∞ Infinite Vue</span><!--[--><!--]--></a></div></div><div class="content" data-v-6aa21345><div class="content-body" data-v-6aa21345><!--[--><!--]--><div class="VPNavBarSearch search" data-v-6aa21345><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><span class="vp-icon DocSearch-Search-Icon"></span><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><!----><!----><div class="VPNavBarAppearance appearance" data-v-6aa21345 data-v-6c893767><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-6c893767 data-v-5337faa4 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-5337faa4></span><span class="vpi-moon moon" data-v-5337faa4></span><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-6aa21345 data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/infinite-system/ivue" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-eee4e7cb><span class="vpi-social-github" /></a><a class="VPSocialLink no-icon" href="https://x.com/evgenykalash" aria-label="twitter" target="_blank" rel="noopener" data-v-7bc22406 data-v-eee4e7cb><span class="vpi-social-twitter" /></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-6aa21345 data-v-bb2aa2f0 data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-b98bc113><!----><!--[--><!--[--><!----><div class="group" data-v-bb2aa2f0><div class="item appearance" data-v-bb2aa2f0><p class="label" data-v-bb2aa2f0>Appearance</p><div class="appearance-action" data-v-bb2aa2f0><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-bb2aa2f0 data-v-5337faa4 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-5337faa4></span><span class="vpi-moon moon" data-v-5337faa4></span><!--]--></span></span></button></div></div></div><div class="group" data-v-bb2aa2f0><div class="item social-links" data-v-bb2aa2f0><div class="VPSocialLinks social-links-list" data-v-bb2aa2f0 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/infinite-system/ivue" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-eee4e7cb><span class="vpi-social-github" /></a><a class="VPSocialLink no-icon" href="https://x.com/evgenykalash" aria-label="twitter" target="_blank" rel="noopener" data-v-7bc22406 data-v-eee4e7cb><span class="vpi-social-twitter" /></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-6aa21345 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-6aa21345><div class="divider-line" data-v-6aa21345></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-17a5e62e><button data-v-17a5e62e>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-319d5ca6><div class="curtain" data-v-319d5ca6></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-319d5ca6><span class="visually-hidden" id="sidebar-aria-label" data-v-319d5ca6> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0 collapsible" data-v-c40bc020 data-v-b7550ba0><div class="item" role="button" tabindex="0" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><h2 class="text" data-v-b7550ba0>Guide</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-b7550ba0><span class="vpi-chevron-right caret-icon" data-v-b7550ba0></span></div></div><div class="items" data-v-b7550ba0><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/introduction.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>What is ivue?</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/how-it-works.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>How it works?</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/getting-started.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Getting Started</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0 collapsible" data-v-c40bc020 data-v-b7550ba0><div class="item" role="button" tabindex="0" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><h2 class="text" data-v-b7550ba0>Usage</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-b7550ba0><span class="vpi-chevron-right caret-icon" data-v-b7550ba0></span></div></div><div class="items" data-v-b7550ba0><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/usage.html#basic-usage" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Basic Usage</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/usage.html#using-props" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Using Props</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/usage.html#using-emits" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Using Emits</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/usage.html#using-refs" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Using Refs</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/usage.html#using-define-expose" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Using Define Expose</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/usage.html#using-composables" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Using Composables</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/usage.html#using-inside-composables" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Using Inside Composables</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/usage.html#using-computeds" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Using Computeds</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/usage.html#using-watch" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Using Watch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/usage.html#using-lifecycle-hooks" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Using Lifecycle Hooks</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/usage.html#using-pinia-store" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Using Pinia Store</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/usage.html#using-quasar-framework" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Using Quasar Framework</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0 collapsible" data-v-c40bc020 data-v-b7550ba0><div class="item" role="button" tabindex="0" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><h2 class="text" data-v-b7550ba0>Guidelines</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-b7550ba0><span class="vpi-chevron-right caret-icon" data-v-b7550ba0></span></div></div><div class="items" data-v-b7550ba0><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/guidelines.html#dos-and-don-ts" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Dos and Don'ts</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/guidelines.html#constructor-vs-init" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>constructor() vs .init()</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/guidelines.html#unwrapping-refs" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Unwrapping Refs</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/guidelines.html#naming-conventions" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Naming Conventions</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0 collapsible" data-v-c40bc020 data-v-b7550ba0><div class="item" role="button" tabindex="0" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><h2 class="text" data-v-b7550ba0>Advanced Usage</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-b7550ba0><span class="vpi-chevron-right caret-icon" data-v-b7550ba0></span></div></div><div class="items" data-v-b7550ba0><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/advanced-usage.html#extend-props-defaults" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Extend Props Defaults</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/advanced-usage.html#extend-props" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Extend Props</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/advanced-usage.html#extend-emits" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Extend Emits</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/advanced-usage.html#extend-slots" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Extend Slots</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/advanced-usage.html#extend-classes" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Extend Classes</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/advanced-usage.html#extend-components" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Extend Components</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0" data-v-c40bc020 data-v-b7550ba0><!----><div class="items" data-v-b7550ba0><!--[--><div class="VPSidebarItem level-1" data-v-b7550ba0 data-v-b7550ba0><div class="item" role="button" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><p class="text" data-v-b7550ba0>API</p><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0 collapsible" data-v-c40bc020 data-v-b7550ba0><div class="item" role="button" tabindex="0" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><h2 class="text" data-v-b7550ba0>Core Functions</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-b7550ba0><span class="vpi-chevron-right caret-icon" data-v-b7550ba0></span></div></div><div class="items" data-v-b7550ba0><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/api.html#ivue" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>ivue()</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/api.html#iref" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>iref()</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/api.html#iuse" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>iuse()</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/api.html#init" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>.init()</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/api.html#torefs" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>.toRefs()</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0 collapsible" data-v-c40bc020 data-v-b7550ba0><div class="item" role="button" tabindex="0" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><h2 class="text" data-v-b7550ba0>Utility Functions</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-b7550ba0><span class="vpi-chevron-right caret-icon" data-v-b7550ba0></span></div></div><div class="items" data-v-b7550ba0><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/api.html#propswithdefaults" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>propsWithDefaults()</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0 collapsible" data-v-c40bc020 data-v-b7550ba0><div class="item" role="button" tabindex="0" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><h2 class="text" data-v-b7550ba0>Utility Types</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-b7550ba0><span class="vpi-chevron-right caret-icon" data-v-b7550ba0></span></div></div><div class="items" data-v-b7550ba0><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/api.html#extractpropdefaulttypes" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>ExtractPropDefaultTypes</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/api.html#extractemittypes" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>ExtractEmitTypes</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/api.html#extendslots" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>ExtendSlots</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/api.html#UseComposable" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>UseComposable</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0 collapsible" data-v-c40bc020 data-v-b7550ba0><div class="item" role="button" tabindex="0" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><h2 class="text" data-v-b7550ba0>Source Code</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-b7550ba0><span class="vpi-chevron-right caret-icon" data-v-b7550ba0></span></div></div><div class="items" data-v-b7550ba0><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/browse-code.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Browse Code</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><nav aria-labelledby="doc-outline-aria-label" class="VPDocAsideOutline" data-v-3f215769 data-v-a5bbad30><div class="content" data-v-a5bbad30><div class="outline-marker" data-v-a5bbad30></div><div aria-level="2" class="outline-title" id="doc-outline-aria-label" role="heading" data-v-a5bbad30>On this page</div><ul class="VPDocOutlineItem root" data-v-a5bbad30 data-v-b933a997><!--[--><!--]--></ul></div></nav><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _ivue_pages_usage" data-v-39a288b8><div><h1 id="example-usage" tabindex="-1">Example Usage <a class="header-anchor" href="#example-usage" aria-label="Permalink to &quot;Example Usage&quot;">​</a></h1><p>Using ivue is very simple, but you need to understand a few principles. See the examples below expanding on each principle.</p><h2 id="basic-usage" tabindex="-1">Basic Usage <a class="header-anchor" href="#basic-usage" aria-label="Permalink to &quot;Basic Usage&quot;">​</a></h2><p>Classic Counter example built with <code>ivue</code></p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-GBQ2K" id="tab-Aj7gjTU" checked><label for="tab-Aj7gjTU">CounterBasic.vue</label></div><div class="blocks"><div class="language-vue vp-adaptive-theme active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setup</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> lang</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;ts&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
22
22
  <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { ivue, iref } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;ivue&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
23
23
  <span class="line"></span>
24
24
  <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">class</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Counter</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
@@ -32,10 +32,10 @@
32
32
  <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
33
33
  <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
34
34
  <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">a</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> href</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;javascript:void(0)&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> @</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">click</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> counter.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">increment</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Increment&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">a</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
35
- <span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Count: {{ counter.count }}</span></span>
35
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Count: {{ counter.count }}</span></span>
36
36
  <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div></div></div><details class="details custom-block"><summary>For this example we initialize the component like this:</summary><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
37
37
  <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">CounterBasic</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /&gt;</span></span>
38
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div></details><div style="font-size:18px;font-weight:500;">Result</div><!--[--><a href="javascript:void(0)">Increment</a> Count: 0<!--]--><div class="warning custom-block"><p class="custom-block-title">NOTICE: JavaScript Class Caveat</p><p>See <code>() =&gt; counter.increment()</code>. You cannot simply use <code>counter.increment</code> to refer to the method when it was defined as an object of a class, because that method would not know that it has to be bound to <code>counter</code>. You have to either use <code>() =&gt; counter.increment()</code> or <code>counter.increment.bind(counter)</code>, but the latter example is too verbose, so the preferred more readable way is to use an arrow function.</p></div><h2 id="using-props" tabindex="-1">Using Props <a class="header-anchor" href="#using-props" aria-label="Permalink to &quot;Using Props&quot;">​</a></h2><p>See the highlighted sections related to props.</p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-uP221" id="tab-3CVRt6L" checked><label for="tab-3CVRt6L">CounterWithProps.vue</label></div><div class="blocks"><div class="language-vue vp-adaptive-theme active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setup</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> lang</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;ts&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
38
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div></details><div style="font-size:18px;font-weight:500;">Result</div><!--[--><a href="javascript:void(0)">Increment</a> Count: 0<!--]--><div class="warning custom-block"><p class="custom-block-title">NOTICE: JavaScript Class Caveat</p><p>See <code>() =&gt; counter.increment()</code>. You cannot simply use <code>counter.increment</code> to refer to the method when it was defined as an object of a class, because that method would not know that it has to be bound to <code>counter</code>. You have to either use <code>() =&gt; counter.increment()</code> or <code>counter.increment.bind(counter)</code>, but the latter example is too verbose, so the preferred more readable way is to use an arrow function.</p></div><h2 id="using-props" tabindex="-1">Using Props <a class="header-anchor" href="#using-props" aria-label="Permalink to &quot;Using Props&quot;">​</a></h2><p>See the highlighted sections related to props.</p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-xY647" id="tab-Xk36Vgx" checked><label for="tab-Xk36Vgx">CounterWithProps.vue</label></div><div class="blocks"><div class="language-vue vp-adaptive-theme active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setup</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> lang</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;ts&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
39
39
  <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { ivue, iref } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;ivue&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
40
40
  <span class="line"></span>
41
41
  <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">interface</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> CounterProps</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
@@ -64,7 +64,7 @@
64
64
  <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Count: {{ counter.count }}</span></span>
65
65
  <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br></div></div></div></div><details class="details custom-block"><summary>For this example we initialize the component like this:</summary><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
66
66
  <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">CounterWithProps</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">initial-count</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">5</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /&gt;</span></span>
67
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div></details><div style="font-size:18px;font-weight:500;">Result</div><!--[--><a href="javascript:void(0)">Increment</a> Count: 5<!--]--><h2 id="using-emits" tabindex="-1">Using Emits <a class="header-anchor" href="#using-emits" aria-label="Permalink to &quot;Using Emits&quot;">​</a></h2><p>See the highlighted sections related to using emits.</p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-DJEy7" id="tab-OeChPHK" checked><label for="tab-OeChPHK">CounterWithPropsAndEmits.vue</label></div><div class="blocks"><div class="language-vue vp-adaptive-theme active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setup</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> lang</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;ts&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
67
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div></details><div style="font-size:18px;font-weight:500;">Result</div><!--[--><a href="javascript:void(0)">Increment</a> Count: 5<!--]--><h2 id="using-emits" tabindex="-1">Using Emits <a class="header-anchor" href="#using-emits" aria-label="Permalink to &quot;Using Emits&quot;">​</a></h2><p>See the highlighted sections related to using emits.</p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-IqFqh" id="tab-P4gAqSL" checked><label for="tab-P4gAqSL">CounterWithPropsAndEmits.vue</label></div><div class="blocks"><div class="language-vue vp-adaptive-theme active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setup</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> lang</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;ts&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
68
68
  <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { ivue, iref } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;ivue&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
69
69
  <span class="line"></span>
70
70
  <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">interface</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> CounterProps</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
@@ -105,7 +105,7 @@
105
105
  <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
106
106
  <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
107
107
  <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">CounterWithPropsAndEmits</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">initial-count</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">5</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> @</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">increment</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">onIncrement</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /&gt;</span></span>
108
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div></details><div style="font-size:18px;font-weight:500;">Result</div><!--[--><a href="javascript:void(0)">Increment</a> Count: 5<!--]--><h2 id="using-refs" tabindex="-1">Using Refs <a class="header-anchor" href="#using-refs" aria-label="Permalink to &quot;Using Refs&quot;">​</a></h2><h3 id="refs-defined-externally-in-the-component-outside-of-the-class" tabindex="-1">Refs defined externally in the component outside of the class. <a class="header-anchor" href="#refs-defined-externally-in-the-component-outside-of-the-class" aria-label="Permalink to &quot;Refs defined externally in the component outside of the class.&quot;">​</a></h3><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-KkKjs" id="tab-UJEgYmi" checked><label for="tab-UJEgYmi">CounterExternalRefs.vue</label></div><div class="blocks"><div class="language-vue vp-adaptive-theme active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setup</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> lang</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;ts&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
108
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div></details><div style="font-size:18px;font-weight:500;">Result</div><!--[--><a href="javascript:void(0)">Increment</a> Count: 5<!--]--><h2 id="using-refs" tabindex="-1">Using Refs <a class="header-anchor" href="#using-refs" aria-label="Permalink to &quot;Using Refs&quot;">​</a></h2><h3 id="refs-defined-externally-in-the-component-outside-of-the-class" tabindex="-1">Refs defined externally in the component outside of the class. <a class="header-anchor" href="#refs-defined-externally-in-the-component-outside-of-the-class" aria-label="Permalink to &quot;Refs defined externally in the component outside of the class.&quot;">​</a></h3><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-zr9Uu" id="tab-9Shqlv_" checked><label for="tab-9Shqlv_">CounterExternalRefs.vue</label></div><div class="blocks"><div class="language-vue vp-adaptive-theme active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setup</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> lang</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;ts&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
109
109
  <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { ref } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;vue&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
110
110
  <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { ivue, iref, iuse } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;ivue&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
111
111
  <span class="line"></span>
@@ -131,7 +131,7 @@
131
131
  <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ref</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;span&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
132
132
  <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br></div></div></div></div><details class="details custom-block"><summary>For this example we initialize the component like this:</summary><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
133
133
  <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">CounterExternalRefs</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /&gt;</span></span>
134
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div></details><div style="font-size:18px;font-weight:500;">Result</div><!--[--><a href="javascript:void(0)">Increment</a> Count: 0 <span></span><!--]--><h3 id="refs-defined-internally-inside-of-the-class" tabindex="-1">Refs defined internally inside of the class. <a class="header-anchor" href="#refs-defined-internally-inside-of-the-class" aria-label="Permalink to &quot;Refs defined internally inside of the class.&quot;">​</a></h3><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-CyfJu" id="tab-_dOU0_q" checked><label for="tab-_dOU0_q">CounterInternalRefs.vue</label></div><div class="blocks"><div class="language-vue vp-adaptive-theme active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setup</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> lang</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;ts&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
134
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div></details><div style="font-size:18px;font-weight:500;">Result</div><!--[--><a href="javascript:void(0)">Increment</a> Count: 0 <span></span><!--]--><h3 id="refs-defined-internally-inside-of-the-class" tabindex="-1">Refs defined internally inside of the class. <a class="header-anchor" href="#refs-defined-internally-inside-of-the-class" aria-label="Permalink to &quot;Refs defined internally inside of the class.&quot;">​</a></h3><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-8gjcU" id="tab-pfTbmMr" checked><label for="tab-pfTbmMr">CounterInternalRefs.vue</label></div><div class="blocks"><div class="language-vue vp-adaptive-theme active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setup</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> lang</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;ts&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
135
135
  <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { ivue, iref } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;ivue&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
136
136
  <span class="line"></span>
137
137
  <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">class</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Counter</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
@@ -157,7 +157,7 @@
157
157
  <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ref</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;span&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
158
158
  <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br></div></div></div></div><details class="details custom-block"><summary>For this example we initialize the component like this:</summary><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
159
159
  <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">CounterInternalRefs</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /&gt;</span></span>
160
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div></details><div style="font-size:18px;font-weight:500;">Result</div><!--[--><a href="javascript:void(0)">Increment</a> Count: 0 <span></span><!--]--><h2 id="using-define-expose" tabindex="-1">Using Define Expose <a class="header-anchor" href="#using-define-expose" aria-label="Permalink to &quot;Using Define Expose&quot;">​</a></h2><h3 id="use-class-as-interface-for-defineexpose" tabindex="-1">Use class as interface for <code>defineExpose()</code> <a class="header-anchor" href="#use-class-as-interface-for-defineexpose" aria-label="Permalink to &quot;Use class as interface for `defineExpose()`&quot;">​</a></h3><p>See the highlighted sections related to <code>defineExpose</code>.</p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-OVniz" id="tab-xIZF5kw" checked><label for="tab-xIZF5kw">CounterDefineExpose.vue</label><input type="radio" name="group-OVniz" id="tab-eC9lyEl"><label for="tab-eC9lyEl">CounterDefineExposeClass.ts</label></div><div class="blocks"><div class="language-vue vp-adaptive-theme active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setup</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> lang</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;ts&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
160
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div></details><div style="font-size:18px;font-weight:500;">Result</div><!--[--><a href="javascript:void(0)">Increment</a> Count: 0 <span></span><!--]--><h2 id="using-define-expose" tabindex="-1">Using Define Expose <a class="header-anchor" href="#using-define-expose" aria-label="Permalink to &quot;Using Define Expose&quot;">​</a></h2><h3 id="use-class-as-interface-for-defineexpose" tabindex="-1">Use class as interface for <code>defineExpose()</code> <a class="header-anchor" href="#use-class-as-interface-for-defineexpose" aria-label="Permalink to &quot;Use class as interface for `defineExpose()`&quot;">​</a></h3><p>See the highlighted sections related to <code>defineExpose</code>.</p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-7KRf5" id="tab-VTmIVHD" checked><label for="tab-VTmIVHD">CounterDefineExpose.vue</label><input type="radio" name="group-7KRf5" id="tab-oHO6PPQ"><label for="tab-oHO6PPQ">CounterDefineExposeClass.ts</label></div><div class="blocks"><div class="language-vue vp-adaptive-theme active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setup</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> lang</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;ts&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
161
161
  <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { ivue } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;ivue&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
162
162
  <span class="line"></span>
163
163
  <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Counter </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;./CounterDefineExposeClass&#39;</span></span>
@@ -197,7 +197,7 @@
197
197
  <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Decrement via Component Ref from Parent Component</span></span>
198
198
  <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
199
199
  <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">CounterDefineExpose</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /&gt;</span></span>
200
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div></details><div style="font-size:18px;font-weight:500;">Result</div><p><button class="button">Increment via Component Ref from Parent Component</button><br><button class="button">Decrement via Component Ref from Parent Component</button></p> Count: 0<h3 id="pick-allowed-interface-properties-for-defineexpose" tabindex="-1">Pick allowed interface properties for <code>defineExpose()</code> <a class="header-anchor" href="#pick-allowed-interface-properties-for-defineexpose" aria-label="Permalink to &quot;Pick allowed interface properties for `defineExpose()`&quot;">​</a></h3><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-hIs0b" id="tab-eEOgzNW" checked><label for="tab-eEOgzNW">CounterDefineExposeAdvanced.vue</label></div><div class="blocks"><div class="language-vue vp-adaptive-theme active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setup</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> lang</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;ts&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
200
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div></details><div style="font-size:18px;font-weight:500;">Result</div><p><button class="button">Increment via Component Ref from Parent Component</button><br><button class="button">Decrement via Component Ref from Parent Component</button></p> Count: 0<h3 id="pick-allowed-interface-properties-for-defineexpose" tabindex="-1">Pick allowed interface properties for <code>defineExpose()</code> <a class="header-anchor" href="#pick-allowed-interface-properties-for-defineexpose" aria-label="Permalink to &quot;Pick allowed interface properties for `defineExpose()`&quot;">​</a></h3><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-UqXt7" id="tab-KSh6tup" checked><label for="tab-KSh6tup">CounterDefineExposeAdvanced.vue</label></div><div class="blocks"><div class="language-vue vp-adaptive-theme active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setup</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> lang</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;ts&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
201
201
  <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { ivue, iref } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;ivue&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
202
202
  <span class="line"></span>
203
203
  <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">/** </span></span>
@@ -220,7 +220,7 @@
220
220
  <span class="line"></span>
221
221
  <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">defineExpose</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">CounterExposed</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;(counter);</span></span>
222
222
  <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
223
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Count: {{ counter.count }}&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br></div></div></div></div><h2 id="using-composables" tabindex="-1">Using Composables <a class="header-anchor" href="#using-composables" aria-label="Permalink to &quot;Using Composables&quot;">​</a></h2><h3 id="assign-a-composable-to-a-class-property" tabindex="-1">Assign a composable to a class property <a class="header-anchor" href="#assign-a-composable-to-a-class-property" aria-label="Permalink to &quot;Assign a composable to a class property&quot;">​</a></h3><p>See the highlighted sections related to composable usage.</p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-QKFS8" id="tab-J-pzFSr" checked><label for="tab-J-pzFSr">CounterComposables.vue</label></div><div class="blocks"><div class="language-vue vp-adaptive-theme active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setup</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> lang</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;ts&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
223
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Count: {{ counter.count }}&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br></div></div></div></div><h2 id="using-composables" tabindex="-1">Using Composables <a class="header-anchor" href="#using-composables" aria-label="Permalink to &quot;Using Composables&quot;">​</a></h2><h3 id="assign-a-composable-to-a-class-property" tabindex="-1">Assign a composable to a class property <a class="header-anchor" href="#assign-a-composable-to-a-class-property" aria-label="Permalink to &quot;Assign a composable to a class property&quot;">​</a></h3><p>See the highlighted sections related to composable usage.</p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-cdZbj" id="tab-DWfgzoA" checked><label for="tab-DWfgzoA">CounterComposables.vue</label></div><div class="blocks"><div class="language-vue vp-adaptive-theme active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setup</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> lang</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;ts&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
224
224
  <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { useMouse, usePointer } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@vueuse/core&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
225
225
  <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { ivue, iref, iuse } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;ivue&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
226
226
  <span class="line"></span>
@@ -248,7 +248,7 @@
248
248
  <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Y: {{ counter.pointer.y }} &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">br</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /&gt;</span></span>
249
249
  <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br></div></div></div></div><details class="details custom-block"><summary>For this example we initialize the component like this:</summary><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
250
250
  <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">CounterComposables</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /&gt;</span></span>
251
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div></details><div style="font-size:18px;font-weight:500;">Result</div><!--[--><a href="javascript:void(0)">Increment</a> Count: 0 <br><br> Mouse: <br> X: 0 <br> Y: 0 <br><br> Pointer: <br> X: 0 <br> Y: 0 <br><!--]--><h3 id="destructuring-composable-into-the-class" tabindex="-1">Destructuring composable into the class <a class="header-anchor" href="#destructuring-composable-into-the-class" aria-label="Permalink to &quot;Destructuring composable into the class&quot;">​</a></h3><p>See the highlighted sections related to destructuring composable usage.</p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-PhPF1" id="tab-Up5zQLo" checked><label for="tab-Up5zQLo">CounterComposablesDestructuring.vue</label><input type="radio" name="group-PhPF1" id="tab-xDnMK93"><label for="tab-xDnMK93">functions/useCustomMouse.ts</label></div><div class="blocks"><div class="language-vue vp-adaptive-theme active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setup</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> lang</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;ts&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
251
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div></details><div style="font-size:18px;font-weight:500;">Result</div><!--[--><a href="javascript:void(0)">Increment</a> Count: 0 <br><br> Mouse: <br> X: 0 <br> Y: 0 <br><br> Pointer: <br> X: 0 <br> Y: 0 <br><!--]--><h3 id="destructuring-composable-into-the-class" tabindex="-1">Destructuring composable into the class <a class="header-anchor" href="#destructuring-composable-into-the-class" aria-label="Permalink to &quot;Destructuring composable into the class&quot;">​</a></h3><p>See the highlighted sections related to destructuring composable usage.</p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-3Q8QZ" id="tab-y9NNU5M" checked><label for="tab-y9NNU5M">CounterComposablesDestructuring.vue</label><input type="radio" name="group-3Q8QZ" id="tab-Y0mJ7bA"><label for="tab-Y0mJ7bA">functions/useCustomMouse.ts</label></div><div class="blocks"><div class="language-vue vp-adaptive-theme active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setup</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> lang</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;ts&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
252
252
  <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { useCustomMouse } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;./functions/useCustomMouse&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
253
253
  <span class="line"></span>
254
254
  <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { ivue, iuse, iref, </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> UseComposable } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;ivue&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
@@ -324,7 +324,7 @@
324
324
  <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> };</span></span>
325
325
  <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br></div></div></div></div><details class="details custom-block"><summary>For this example we initialize the component like this:</summary><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
326
326
  <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">CounterComposablesDestructuring</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /&gt;</span></span>
327
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div></details><div style="font-size:18px;font-weight:500;">Result</div><!--[--><a href="javascript:void(0)">Increment</a> Count: 0 <br> Mouse X: 0, Y: 0 <br> Total (computed): 0 <br><button class="button">Click This Big Sum Button To Total X + Y</button><!--]--><h3 id="using-ivue-composables-directly" tabindex="-1">Using <code>ivue</code> Composables Directly <a class="header-anchor" href="#using-ivue-composables-directly" aria-label="Permalink to &quot;Using `ivue` Composables Directly&quot;">​</a></h3><p>Using <code>ivue</code> based composables assigned to a class property:</p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-rvKVs" id="tab-FA6VYdh" checked><label for="tab-FA6VYdh">CounterComposablesIvue.vue</label><input type="radio" name="group-rvKVs" id="tab-2iXJmEX"><label for="tab-2iXJmEX">classes/CustomMouse.ts</label></div><div class="blocks"><div class="language-vue vp-adaptive-theme active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setup</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> lang</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;ts&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
327
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div></details><div style="font-size:18px;font-weight:500;">Result</div><!--[--><a href="javascript:void(0)">Increment</a> Count: 0 <br> Mouse X: 0, Y: 0 <br> Total (computed): 0 <br><button class="button">Click This Big Sum Button To Total X + Y</button><!--]--><h3 id="using-ivue-composables-directly" tabindex="-1">Using <code>ivue</code> Composables Directly <a class="header-anchor" href="#using-ivue-composables-directly" aria-label="Permalink to &quot;Using `ivue` Composables Directly&quot;">​</a></h3><p>Using <code>ivue</code> based composables assigned to a class property:</p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-cj_fo" id="tab-QREjB3A" checked><label for="tab-QREjB3A">CounterComposablesIvue.vue</label><input type="radio" name="group-cj_fo" id="tab-AZULqEQ"><label for="tab-AZULqEQ">classes/CustomMouse.ts</label></div><div class="blocks"><div class="language-vue vp-adaptive-theme active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setup</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> lang</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;ts&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
328
328
  <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { CustomMouse } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;./classes/CustomMouse&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
329
329
  <span class="line"></span>
330
330
  <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { ivue, iref } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;ivue&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
@@ -373,7 +373,7 @@
373
373
  <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
374
374
  <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br></div></div></div></div><details class="details custom-block"><summary>For this example we initialize the component like this:</summary><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
375
375
  <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">CounterComposablesIvue</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /&gt;</span></span>
376
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div></details><div style="font-size:18px;font-weight:500;">Result</div><!--[--><a href="javascript:void(0)">Increment</a> Count: 0 <br> Mouse X: 0, Y: 0 <br> Total (computed): 0 <br><button class="button">Click This Big Sum Button To Total X + Y</button><!--]--><h3 id="using-ivue-composables-with-destructuring" tabindex="-1">Using <code>ivue</code> Composables With Destructuring <a class="header-anchor" href="#using-ivue-composables-with-destructuring" aria-label="Permalink to &quot;Using `ivue` Composables With Destructuring&quot;">​</a></h3><p>See the sections related to using <code>ivue</code> based composables initialized through class destructuring assignment.</p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-xGKTb" id="tab-TjPPnQ6" checked><label for="tab-TjPPnQ6">CounterComposablesIvueDestructuring.vue</label><input type="radio" name="group-xGKTb" id="tab-rE1P9vP"><label for="tab-rE1P9vP">classes/CustomMouse.ts</label></div><div class="blocks"><div class="language-vue vp-adaptive-theme active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setup</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> lang</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;ts&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
376
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div></details><div style="font-size:18px;font-weight:500;">Result</div><!--[--><a href="javascript:void(0)">Increment</a> Count: 0 <br> Mouse X: 0, Y: 0 <br> Total (computed): 0 <br><button class="button">Click This Big Sum Button To Total X + Y</button><!--]--><h3 id="using-ivue-composables-with-destructuring" tabindex="-1">Using <code>ivue</code> Composables With Destructuring <a class="header-anchor" href="#using-ivue-composables-with-destructuring" aria-label="Permalink to &quot;Using `ivue` Composables With Destructuring&quot;">​</a></h3><p>See the sections related to using <code>ivue</code> based composables initialized through class destructuring assignment.</p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-HK9xt" id="tab-IR6AtF4" checked><label for="tab-IR6AtF4">CounterComposablesIvueDestructuring.vue</label><input type="radio" name="group-HK9xt" id="tab-RPg1O35"><label for="tab-RPg1O35">classes/CustomMouse.ts</label></div><div class="blocks"><div class="language-vue vp-adaptive-theme active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setup</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> lang</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;ts&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
377
377
  <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { CustomMouse } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;./classes/CustomMouse&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
378
378
  <span class="line"></span>
379
379
  <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { ivue, iref } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;../../../../src/ivue&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
@@ -442,7 +442,7 @@
442
442
  <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
443
443
  <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br></div></div></div></div><details class="details custom-block"><summary>For this example we initialize the component like this:</summary><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
444
444
  <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">CounterComposablesIvueDestructuring</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /&gt;</span></span>
445
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div></details><div style="font-size:18px;font-weight:500;">Result</div><!--[--><a href="javascript:void(0)">Increment</a> Count: 0 <br> Mouse X: 0, Y: 0 <br> Total (computed): 0 <br><button class="button"> Click This Big Sum Button To Total X + Y </button><!--]--><h2 id="using-inside-composables" tabindex="-1">Using Inside Composables <a class="header-anchor" href="#using-inside-composables" aria-label="Permalink to &quot;Using Inside Composables&quot;">​</a></h2><p>See the highlighted sections related to using <code>ivue</code> inside a composable.</p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-l5Zug" id="tab-4D0kIzq" checked><label for="tab-4D0kIzq">CounterInsideComposables.vue</label></div><div class="blocks"><div class="language-vue vp-adaptive-theme active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setup</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> lang</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;ts&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
445
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div></details><div style="font-size:18px;font-weight:500;">Result</div><!--[--><a href="javascript:void(0)">Increment</a> Count: 0 <br> Mouse X: 0, Y: 0 <br> Total (computed): 0 <br><button class="button"> Click This Big Sum Button To Total X + Y </button><!--]--><h2 id="using-inside-composables" tabindex="-1">Using Inside Composables <a class="header-anchor" href="#using-inside-composables" aria-label="Permalink to &quot;Using Inside Composables&quot;">​</a></h2><p>See the highlighted sections related to using <code>ivue</code> inside a composable.</p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-GSXUD" id="tab-Ul2kqSI" checked><label for="tab-Ul2kqSI">CounterInsideComposables.vue</label></div><div class="blocks"><div class="language-vue vp-adaptive-theme active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setup</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> lang</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;ts&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
446
446
  <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { ivue, iref } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;ivue&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
447
447
  <span class="line"></span>
448
448
  <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">class</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Counter</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
@@ -469,7 +469,7 @@
469
469
  <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Count: {{ count }} &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">br</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /&gt;</span></span>
470
470
  <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br></div></div></div></div><details class="details custom-block"><summary>For this example we initialize the component like this:</summary><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
471
471
  <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">CounterInsideComposables</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /&gt;</span></span>
472
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div></details><div style="font-size:18px;font-weight:500;">Result</div><!--[--><a href="javascript:void(0)">Increment</a> Count: 0 <br><!--]--><h2 id="using-computeds" tabindex="-1">Using Computeds <a class="header-anchor" href="#using-computeds" aria-label="Permalink to &quot;Using Computeds&quot;">​</a></h2><h3 id="getters-are-computeds-in-ivue-unless-disabled" tabindex="-1">Getters are computeds in <code>ivue</code> unless disabled.<br> <a class="header-anchor" href="#getters-are-computeds-in-ivue-unless-disabled" aria-label="Permalink to &quot;Getters are computeds in `ivue` unless disabled.&lt;br /&gt;&quot;">​</a></h3><p>See the highlighted sections related to getters.</p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-Yeyay" id="tab-y3a_6-4" checked><label for="tab-y3a_6-4">CounterComputeds.vue</label></div><div class="blocks"><div class="language-vue vp-adaptive-theme active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setup</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> lang</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;ts&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
472
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div></details><div style="font-size:18px;font-weight:500;">Result</div><!--[--><a href="javascript:void(0)">Increment</a> Count: 0 <br><!--]--><h2 id="using-computeds" tabindex="-1">Using Computeds <a class="header-anchor" href="#using-computeds" aria-label="Permalink to &quot;Using Computeds&quot;">​</a></h2><h3 id="getters-are-computeds-in-ivue-unless-disabled" tabindex="-1">Getters are computeds in <code>ivue</code> unless disabled.<br> <a class="header-anchor" href="#getters-are-computeds-in-ivue-unless-disabled" aria-label="Permalink to &quot;Getters are computeds in `ivue` unless disabled.&lt;br /&gt;&quot;">​</a></h3><p>See the highlighted sections related to getters.</p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-gTluE" id="tab-IcNRTPt" checked><label for="tab-IcNRTPt">CounterComputeds.vue</label></div><div class="blocks"><div class="language-vue vp-adaptive-theme active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setup</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> lang</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;ts&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
473
473
  <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { ivue, iref } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;ivue&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
474
474
  <span class="line"></span>
475
475
  <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">class</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Counter</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
@@ -494,7 +494,7 @@
494
494
  <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Quad Count: {{ counter.quadCount }} &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">br</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /&gt;</span></span>
495
495
  <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br></div></div></div></div><details class="details custom-block"><summary>For this example we initialize the component like this:</summary><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
496
496
  <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">CounterComputeds</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /&gt;</span></span>
497
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div></details><div style="font-size:18px;font-weight:500;">Result</div><!--[--><a href="javascript:void(0)">Increment</a> Count: 0 <br> Double Count: 0 <br> Quad Count: 0 <br><!--]--><h3 id="disable-computed-behavior-for-certain-getters-in-ivue" tabindex="-1">Disable computed behavior for certain getters in <code>ivue</code>.<br> <a class="header-anchor" href="#disable-computed-behavior-for-certain-getters-in-ivue" aria-label="Permalink to &quot;Disable computed behavior for certain getters in `ivue`.&lt;br /&gt;&quot;">​</a></h3><p>You can disable computed getters via <code>static ivue = { getter: false }</code>, see below:</p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-OAe4a" id="tab-jFp8c2l" checked><label for="tab-jFp8c2l">CounterComputedsDisabled.vue</label></div><div class="blocks"><div class="language-vue vp-adaptive-theme active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setup</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> lang</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;ts&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
497
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div></details><div style="font-size:18px;font-weight:500;">Result</div><!--[--><a href="javascript:void(0)">Increment</a> Count: 0 <br> Double Count: 0 <br> Quad Count: 0 <br><!--]--><h3 id="disable-computed-behavior-for-certain-getters-in-ivue" tabindex="-1">Disable computed behavior for certain getters in <code>ivue</code>.<br> <a class="header-anchor" href="#disable-computed-behavior-for-certain-getters-in-ivue" aria-label="Permalink to &quot;Disable computed behavior for certain getters in `ivue`.&lt;br /&gt;&quot;">​</a></h3><p>You can disable computed getters via <code>static ivue = { getter: false }</code>, see below:</p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-FWkfH" id="tab-f21dbsN" checked><label for="tab-f21dbsN">CounterComputedsDisabled.vue</label></div><div class="blocks"><div class="language-vue vp-adaptive-theme active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setup</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> lang</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;ts&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
498
498
  <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { ivue, iref } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;ivue&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
499
499
  <span class="line"></span>
500
500
  <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">class</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Counter</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
@@ -524,19 +524,19 @@
524
524
  <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Count: {{ counter.count }} &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">br</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /&gt;</span></span>
525
525
  <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Double Count: {{ counter.doubleCount }} &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">br</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /&gt;</span></span>
526
526
  <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Quad Count: {{ counter.quadCount }} &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">br</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /&gt;</span></span>
527
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br></div></div></div></div><p>The result of this example is identical to the above.</p><h2 id="using-watch" tabindex="-1">Using Watch <a class="header-anchor" href="#using-watch" aria-label="Permalink to &quot;Using Watch&quot;">​</a></h2><p>To use <code>watch</code>, <code>watchEffect</code>, and other reactive functions, declare <code>.init()</code> method in the class. See the highlighted sections related to using <code>init()</code> below:</p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-ghc-2" id="tab-B9iKT34" checked><label for="tab-B9iKT34">CounterWatch.vue</label></div><div class="blocks"><div class="language-vue vp-adaptive-theme active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setup</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> lang</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;ts&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
527
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br></div></div></div></div><p>The result of this example is identical to the above.</p><h2 id="using-watch" tabindex="-1">Using Watch <a class="header-anchor" href="#using-watch" aria-label="Permalink to &quot;Using Watch&quot;">​</a></h2><p>To use <code>watch</code>, <code>watchEffect</code>, and other reactive functions, declare <code>.init()</code> method in the class. See the highlighted sections related to using <code>init()</code> below:</p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-NZZFl" id="tab-xLnrOgI" checked><label for="tab-xLnrOgI">CounterWatch.vue</label></div><div class="blocks"><div class="language-vue vp-adaptive-theme active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setup</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> lang</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;ts&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
528
528
  <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { watch } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;vue&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
529
529
  <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { ivue, iref } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;ivue&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
530
530
  <span class="line"></span>
531
531
  <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">class</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Counter</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
532
- <span class="line highlighted"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> init</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() {</span></span>
533
- <span class="line highlighted"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> /** Note that we use this.count as a reactive prop in the watch() function */</span></span>
534
- <span class="line highlighted"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> watch</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span></span>
535
- <span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.count,</span></span>
536
- <span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">newCount</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
537
- <span class="line highlighted"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (newCount </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">===</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 5</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
538
- <span class="line highlighted"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> alert</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;You already clicked 5 times!&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
539
- <span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
532
+ <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> init</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() {</span></span>
533
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> /** Note that we use this.count as a reactive prop in the watch() function */</span></span>
534
+ <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> watch</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span></span>
535
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.count,</span></span>
536
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">newCount</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
537
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (newCount </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">===</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 5</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
538
+ <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> alert</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;You already clicked 5 times!&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
539
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
540
540
  <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
541
541
  <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> );</span></span>
542
542
  <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
@@ -553,15 +553,15 @@
553
553
  <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Count: {{ counter.count }} (Click 5 times to get an alert)</span></span>
554
554
  <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br></div></div></div></div><details class="details custom-block"><summary>For this example we initialize the component like this:</summary><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
555
555
  <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">CounterWatch</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /&gt;</span></span>
556
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div></details><div style="font-size:18px;font-weight:500;">Result</div><!--[--><a href="javascript:void(0)">Increment</a> Count: 0 (Click 5 times to get an alert) <!--]--><h2 id="using-lifecycle-hooks" tabindex="-1">Using Lifecycle Hooks <a class="header-anchor" href="#using-lifecycle-hooks" aria-label="Permalink to &quot;Using Lifecycle Hooks&quot;">​</a></h2><p>To use <code>onMounted</code>, <code>onBeforeMount</code> and other lifecycle hooks, declare <code>.init()</code> method in the class. See the highlighted sections related to using <code>init()</code> below:</p><div class="tip custom-block"><p class="custom-block-title">NOTICE:</p><p><code>init()</code> method can be declared as <code>async</code> if needed.</p></div><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-EaahG" id="tab-NVit9mv" checked><label for="tab-NVit9mv">CounterLifecycleHooks.vue</label></div><div class="blocks"><div class="language-vue vp-adaptive-theme active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setup</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> lang</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;ts&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
556
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div></details><div style="font-size:18px;font-weight:500;">Result</div><!--[--><a href="javascript:void(0)">Increment</a> Count: 0 (Click 5 times to get an alert) <!--]--><h2 id="using-lifecycle-hooks" tabindex="-1">Using Lifecycle Hooks <a class="header-anchor" href="#using-lifecycle-hooks" aria-label="Permalink to &quot;Using Lifecycle Hooks&quot;">​</a></h2><p>To use <code>onMounted</code>, <code>onBeforeMount</code> and other lifecycle hooks, declare <code>.init()</code> method in the class. See the highlighted sections related to using <code>init()</code> below:</p><div class="tip custom-block"><p class="custom-block-title">NOTICE:</p><p><code>init()</code> method can be declared as <code>async</code> if needed.</p></div><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-_HLlE" id="tab-EkydzcU" checked><label for="tab-EkydzcU">CounterLifecycleHooks.vue</label></div><div class="blocks"><div class="language-vue vp-adaptive-theme active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setup</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> lang</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;ts&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
557
557
  <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { onMounted } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;vue&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
558
558
  <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { ivue, iref } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;ivue&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
559
559
  <span class="line"></span>
560
560
  <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">class</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Counter</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
561
561
  <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> init</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() {</span></span>
562
- <span class="line highlighted"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> onMounted</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
563
- <span class="line highlighted"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.count </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 100</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
564
- <span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> });</span></span>
562
+ <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> onMounted</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
563
+ <span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.count </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 100</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
564
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> });</span></span>
565
565
  <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
566
566
  <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> count</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> iref</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
567
567
  <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> increment</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() {</span></span>
@@ -577,7 +577,7 @@
577
577
  <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br></div></div></div></div><details class="details custom-block"><summary>For this example we initialize the component like this:</summary><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
578
578
  <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">CounterLifecycleHooks</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /&gt;</span></span>
579
579
  <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div></details><div style="font-size:18px;font-weight:500;">Result</div><!--[--><a href="javascript:void(0)">Increment</a> Count: 0 (onMounted we set it to 100) <!--]--></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-e257564d><!--[--><!--]--><!----><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-e257564d><span class="visually-hidden" id="doc-footer-aria-label" data-v-e257564d>Pager</span><div class="pager" data-v-e257564d><!----></div><div class="pager" data-v-e257564d><a class="VPLink link pager-link next" href="/ivue/pages/introduction.html" data-v-e257564d><!--[--><span class="desc" data-v-e257564d>Next page</span><span class="title" data-v-e257564d>What is ivue?</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div></div>
580
- <script>window.__VP_HASH_MAP__=JSON.parse("{\"api_ivue.md\":\"DyFbv52x\",\"api_propswithdefaults.md\":\"C6C7ZBZl\",\"index.md\":\"D-9TpgnJ\",\"pages_advanced-usage.md\":\"DsU0E8Oi\",\"pages_api.md\":\"CElVfYwg\",\"pages_browse-code.md\":\"D-gTrMhG\",\"pages_getting-started.md\":\"COvbcFGT\",\"pages_guidelines.md\":\"BI1PexCc\",\"pages_how-it-works.md\":\"NImDvDby\",\"pages_how-its-made.md\":\"CCol99CD\",\"pages_introduction.md\":\"CCkiQtfX\",\"pages_usage.md\":\"DRJXyExt\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"VitePress\",\"titleTemplate\":\":title | Infinite Vue ∞ ivue\",\"description\":\"A VitePress site\",\"base\":\"/ivue/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"outline\":\"deep\",\"siteTitle\":\"ivue ∞ Infinite Vue\",\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/infinite-system/ivue\"},{\"icon\":\"twitter\",\"link\":\"https://x.com/evgenykalash\"}],\"search\":{\"provider\":\"local\"},\"sidebar\":[{\"collapsed\":false,\"text\":\"Guide\",\"items\":[{\"text\":\"What is ivue?\",\"link\":\"/pages/introduction\"},{\"text\":\"How it works?\",\"link\":\"/pages/how-it-works\"},{\"text\":\"Getting Started\",\"link\":\"/pages/getting-started\"}]},{\"collapsed\":false,\"text\":\"Usage\",\"items\":[{\"text\":\"Basic Usage\",\"link\":\"/pages/usage#basic-usage\"},{\"text\":\"Using Props\",\"link\":\"/pages/usage#using-props\"},{\"text\":\"Using Emits\",\"link\":\"/pages/usage#using-emits\"},{\"text\":\"Using Refs\",\"link\":\"/pages/usage#using-refs\"},{\"text\":\"Using Define Expose\",\"link\":\"/pages/usage#using-define-expose\"},{\"text\":\"Using Composables\",\"link\":\"/pages/usage#using-composables\"},{\"text\":\"Using Inside Composables\",\"link\":\"/pages/usage#using-inside-composables\"},{\"text\":\"Using Computeds\",\"link\":\"/pages/usage#using-computeds\"},{\"text\":\"Using Watch\",\"link\":\"/pages/usage#using-watch\"},{\"text\":\"Using Lifecycle Hooks\",\"link\":\"/pages/usage#using-lifecycle-hooks\"},{\"text\":\"Using Pinia Store\",\"link\":\"/pages/usage#using-pinia-store\"},{\"text\":\"Using Quasar Framework\",\"link\":\"/pages/usage#using-quasar-framework\"}]},{\"collapsed\":false,\"text\":\"Guidelines\",\"items\":[{\"text\":\"Dos and Don'ts\",\"link\":\"/pages/guidelines#dos-and-don-ts\"},{\"text\":\"constructor() vs .init()\",\"link\":\"/pages/guidelines#constructor-vs-init\"},{\"text\":\"Unwrapping Refs\",\"link\":\"/pages/guidelines#unwrapping-refs\"},{\"text\":\"Naming Conventions\",\"link\":\"/pages/guidelines#naming-conventions\"}]},{\"collapsed\":false,\"text\":\"Advanced Usage\",\"items\":[{\"text\":\"Extend Props Defaults\",\"link\":\"/pages/advanced-usage#extend-props-defaults\"},{\"text\":\"Extend Props\",\"link\":\"/pages/advanced-usage#extend-props\"},{\"text\":\"Extend Emits\",\"link\":\"/pages/advanced-usage#extend-emits\"},{\"text\":\"Extend Slots\",\"link\":\"/pages/advanced-usage#extend-slots\"},{\"text\":\"Extend Classes\",\"link\":\"/pages/advanced-usage#extend-classes\"},{\"text\":\"Extend Components\",\"link\":\"/pages/advanced-usage#extend-components\"}]},{\"text\":\"API\"},{\"collapsed\":false,\"text\":\"Core Functions\",\"items\":[{\"text\":\"ivue()\",\"link\":\"/pages/api#ivue\"},{\"text\":\"iref()\",\"link\":\"/pages/api#iref\"},{\"text\":\"iuse()\",\"link\":\"/pages/api#iuse\"},{\"text\":\".init()\",\"link\":\"/pages/api#init\"},{\"text\":\".toRefs()\",\"link\":\"/pages/api#torefs\"}]},{\"collapsed\":false,\"text\":\"Utility Functions\",\"items\":[{\"text\":\"propsWithDefaults()\",\"link\":\"/pages/api#propswithdefaults\"}]},{\"collapsed\":false,\"text\":\"Utility Types\",\"items\":[{\"text\":\"ExtractPropDefaultTypes\",\"link\":\"/pages/api#extractpropdefaulttypes\"},{\"text\":\"ExtractEmitTypes\",\"link\":\"/pages/api#extractemittypes\"},{\"text\":\"ExtendSlots\",\"link\":\"/pages/api#extendslots\"},{\"text\":\"UseComposable\",\"link\":\"/pages/api#UseComposable\"}]},{\"collapsed\":false,\"text\":\"Source Code\",\"items\":[{\"text\":\"Browse Code\",\"link\":\"/pages/browse-code\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
580
+ <script>window.__VP_HASH_MAP__=JSON.parse("{\"api_ivue.md\":\"DyFbv52x\",\"api_propswithdefaults.md\":\"C6C7ZBZl\",\"index.md\":\"D-9TpgnJ\",\"pages_advanced-usage.md\":\"DsU0E8Oi\",\"pages_api.md\":\"CElVfYwg\",\"pages_browse-code.md\":\"d01mQ5OL\",\"pages_getting-started.md\":\"g77_aCnX\",\"pages_guidelines.md\":\"DufOHb7U\",\"pages_how-it-works.md\":\"BaYaFawX\",\"pages_how-its-made.md\":\"CCol99CD\",\"pages_introduction.md\":\"CCkiQtfX\",\"pages_usage.md\":\"Fo9SdFjd\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"VitePress\",\"titleTemplate\":\":title | Infinite Vue ∞ ivue\",\"description\":\"A VitePress site\",\"base\":\"/ivue/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"outline\":\"deep\",\"siteTitle\":\"ivue ∞ Infinite Vue\",\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/infinite-system/ivue\"},{\"icon\":\"twitter\",\"link\":\"https://x.com/evgenykalash\"}],\"search\":{\"provider\":\"local\"},\"sidebar\":[{\"collapsed\":false,\"text\":\"Guide\",\"items\":[{\"text\":\"What is ivue?\",\"link\":\"/pages/introduction\"},{\"text\":\"How it works?\",\"link\":\"/pages/how-it-works\"},{\"text\":\"Getting Started\",\"link\":\"/pages/getting-started\"}]},{\"collapsed\":false,\"text\":\"Usage\",\"items\":[{\"text\":\"Basic Usage\",\"link\":\"/pages/usage#basic-usage\"},{\"text\":\"Using Props\",\"link\":\"/pages/usage#using-props\"},{\"text\":\"Using Emits\",\"link\":\"/pages/usage#using-emits\"},{\"text\":\"Using Refs\",\"link\":\"/pages/usage#using-refs\"},{\"text\":\"Using Define Expose\",\"link\":\"/pages/usage#using-define-expose\"},{\"text\":\"Using Composables\",\"link\":\"/pages/usage#using-composables\"},{\"text\":\"Using Inside Composables\",\"link\":\"/pages/usage#using-inside-composables\"},{\"text\":\"Using Computeds\",\"link\":\"/pages/usage#using-computeds\"},{\"text\":\"Using Watch\",\"link\":\"/pages/usage#using-watch\"},{\"text\":\"Using Lifecycle Hooks\",\"link\":\"/pages/usage#using-lifecycle-hooks\"},{\"text\":\"Using Pinia Store\",\"link\":\"/pages/usage#using-pinia-store\"},{\"text\":\"Using Quasar Framework\",\"link\":\"/pages/usage#using-quasar-framework\"}]},{\"collapsed\":false,\"text\":\"Guidelines\",\"items\":[{\"text\":\"Dos and Don'ts\",\"link\":\"/pages/guidelines#dos-and-don-ts\"},{\"text\":\"constructor() vs .init()\",\"link\":\"/pages/guidelines#constructor-vs-init\"},{\"text\":\"Unwrapping Refs\",\"link\":\"/pages/guidelines#unwrapping-refs\"},{\"text\":\"Naming Conventions\",\"link\":\"/pages/guidelines#naming-conventions\"}]},{\"collapsed\":false,\"text\":\"Advanced Usage\",\"items\":[{\"text\":\"Extend Props Defaults\",\"link\":\"/pages/advanced-usage#extend-props-defaults\"},{\"text\":\"Extend Props\",\"link\":\"/pages/advanced-usage#extend-props\"},{\"text\":\"Extend Emits\",\"link\":\"/pages/advanced-usage#extend-emits\"},{\"text\":\"Extend Slots\",\"link\":\"/pages/advanced-usage#extend-slots\"},{\"text\":\"Extend Classes\",\"link\":\"/pages/advanced-usage#extend-classes\"},{\"text\":\"Extend Components\",\"link\":\"/pages/advanced-usage#extend-components\"}]},{\"text\":\"API\"},{\"collapsed\":false,\"text\":\"Core Functions\",\"items\":[{\"text\":\"ivue()\",\"link\":\"/pages/api#ivue\"},{\"text\":\"iref()\",\"link\":\"/pages/api#iref\"},{\"text\":\"iuse()\",\"link\":\"/pages/api#iuse\"},{\"text\":\".init()\",\"link\":\"/pages/api#init\"},{\"text\":\".toRefs()\",\"link\":\"/pages/api#torefs\"}]},{\"collapsed\":false,\"text\":\"Utility Functions\",\"items\":[{\"text\":\"propsWithDefaults()\",\"link\":\"/pages/api#propswithdefaults\"}]},{\"collapsed\":false,\"text\":\"Utility Types\",\"items\":[{\"text\":\"ExtractPropDefaultTypes\",\"link\":\"/pages/api#extractpropdefaulttypes\"},{\"text\":\"ExtractEmitTypes\",\"link\":\"/pages/api#extractemittypes\"},{\"text\":\"ExtendSlots\",\"link\":\"/pages/api#extendslots\"},{\"text\":\"UseComposable\",\"link\":\"/pages/api#UseComposable\"}]},{\"collapsed\":false,\"text\":\"Source Code\",\"items\":[{\"text\":\"Browse Code\",\"link\":\"/pages/browse-code\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
581
581
 
582
582
  </body>
583
583
  </html>