chore: mark some more code to twoslash

Author: antfu

.vitepress/config.ts

@@ -623,8 +623,6 @@ export default defineConfigWithTheme<ThemeConfig>({
     ]
   ],
 
-
-
   themeConfig: {
     nav,
     sidebar,
@@ -726,6 +724,7 @@ export default defineConfigWithTheme<ThemeConfig>({
 
   vite: {
     define: {
+      // Turn this back off after floating-vue migrated to Composition API
       __VUE_OPTIONS_API__: true
     },
     optimizeDeps: {

src/guide/essentials/application.md

@@ -4,7 +4,7 @@
 
 Every Vue application starts by creating a new **application instance** with the [`createApp`](/api/application#createapp) function:
 
-```js
+```js twoslash
 import { createApp } from 'vue'
 
 const app = createApp({
@@ -18,7 +18,7 @@ The object we are passing into `createApp` is in fact a component. Every app req
 
 If you are using Single-File Components, we typically import the root component from another file:
 
-```js
+```js twoslash
 import { createApp } from 'vue'
 // import the root component App from a single-file component.
 import App from './App.vue'
@@ -67,7 +67,7 @@ The template for the root component is usually part of the component itself, but
 </div>
 ```
 
-```js
+```js twoslash
 import { createApp } from 'vue'
 
 const app = createApp({

src/guide/essentials/reactivity-fundamentals.md

@@ -73,15 +73,15 @@ When you access `this.someObject` after assigning it, the value is a reactive pr
 
 In Composition API, the recommended way to declare reactive state is using the [`ref()`](/api/reactivity-core#ref) function:
 
-```js
+```js twoslash
 import { ref } from 'vue'
 
 const count = ref(0)
 ```
 
 `ref()` takes the argument and returns it wrapped within a ref object with a `.value` property:
 
-```js
+```js twoslash
 const count = ref(0)
 
 console.log(count) // { value: 0 }
@@ -95,7 +95,7 @@ console.log(count.value) // 1
 
 To access refs in a component's template, declare and return them from a component's `setup()` function:
 
-```js{5,9-11}
+```js{5,9-11} twoslash
 import { ref } from 'vue'
 
 export default {
@@ -127,7 +127,7 @@ You can also mutate a ref directly in event handlers:
 
 For more complex logic, we can declare functions that mutate refs in the same scope and expose them as methods alongside the state:
 
-```js{7-10,15}
+```js{7-10,15} twoslash
 import { ref } from 'vue'
 
 export default {
@@ -150,7 +150,7 @@ export default {
 
 Exposed methods can then be used as event handlers:
 
-```vue-html{1}
+```vue{1}
 <button @click="increment">
   {{ count }}
 </button>
@@ -162,7 +162,7 @@ Here's the example live on [Codepen](https://codepen.io/vuejs-examples/pen/WNYba
 
 Manually exposing state and methods via `setup()` can be verbose. Luckily, it can be avoided when using [Single-File Components (SFCs)](/guide/scaling-up/sfc). We can simplify the usage with `<script setup>`:
 
-```vue{1}
+```vue{1} twoslash
 <script setup>
 import { ref } from 'vue'
 
@@ -305,7 +305,7 @@ Refs can hold any value type, including deeply nested objects, arrays, or JavaSc
 
 A ref will make its value deeply reactive. This means you can expect changes to be detected even when you mutate nested objects or arrays:
 
-```js
+```js twoslash
 import { ref } from 'vue'
 
 const obj = ref({

src/guide/introduction.md

@@ -211,7 +211,7 @@ With Composition API, we define a component's logic using imported API functions
 
 Here is the same component, with the exact same template, but using Composition API and `<script setup>` instead:
 
-```vue
+```vue twoslash
 <script setup>
 import { ref, onMounted } from 'vue'