GavinRay97 · January 4, 2022 05:38 · Jun 24, 2021 · Jul 4, 2020 · Jul 4, 2020 · Jul 4, 2020
diff --git a/guide.md b/guide.md
@@ -1,5 +1,9 @@
 # Main
 
+**EDIT: DO NOT USE THIS. THIS WAS FROM WHEN ALL OF THIS WAS NEW/EXPERIMENTAL AND NOT OFFICIALLY SUPPORTED. PLEASE SEE THE LINK BELOW FOR THE PROPER, EASIER INTEGRATION NOWADAYS =)**
+
+- https://typescript.nuxtjs.org/examples/composition-api/basic/
+
 Use `create-nuxt-app` and enable the Typescript related options to scaffold a new boilerplate TS Nuxt repo:
 
 ```bash

diff --git a/guide.md b/guide.md
@@ -8,7 +8,7 @@ yarn create nuxt-app <my-project>
 npx create-nuxt-app <my-project>
 ```
 
-This should install `@nuxt/typescript-runtime` and `@nuxt/typescript-built`, plus `@nuxt/exlint-config-typescript`.
+This should install `@nuxt/typescript-runtime` and `@nuxt/typescript-build`, plus `@nuxt/eslint-config-typescript`.
 Next, run the following:
 ```sh
 yarn add nuxt-composition-api

diff --git a/guide.md b/guide.md
@@ -18,8 +18,8 @@ yarn add --dev @nuxt/babel-preset-app babel-preset-vca-jsx@beta vue-tsx-support
 `vue-tsx-support` is the primary provider of TSX functionality, it requires `babel-preset-vca-jsx` to work properly with the Composition API.
 `@nuxt/babel-preset-app` is required as the default base to build off of, so that the other plugin works.
 
-https://github.com/wonderful-panda/vue-tsx-support
-https://github.com/luwanquan/babel-preset-vca-jsx
+- https://github.com/wonderful-panda/vue-tsx-support
+- https://github.com/luwanquan/babel-preset-vca-jsx
 
 In `nuxt.config.(js|ts)`, import `vue-tsx-support/enable-check` (you could import it anywhere theoretically, but this seems a good spot) and configure the `build.babel` property, as well as add `nuxt-composition-api` to `buildModules`:
 

diff --git a/guide.md b/guide.md
@@ -49,7 +49,7 @@ export default {
 }
 ```
 
-Now you should be able to write fully type-checked TSX Components (even mixed in with regular components) using the Composition API =d
+Now you should be able to write fully type-checked TSX Components (even mixed in with regular components) using the Composition API =D
 ```tsx
 import { defineComponent, PropType } from 'nuxt-composition-api'
 

diff --git a/guide.md b/guide.md
@@ -112,7 +112,7 @@ Then, add the plugin to your `nuxt-config.(js|ts)`:
 Note the use of `module:` prefix here, this is because Babel will try to prepend `babel-plugin` to the package name by default.
 Now, you can use `v-model` =)
 
-```ts
+```tsx
 import { defineComponent, reactive } from 'nuxt-composition-api'
 
 export default defineComponent({

diff --git a/guide.md b/guide.md
@@ -1,3 +1,5 @@
+# Main
+
 Use `create-nuxt-app` and enable the Typescript related options to scaffold a new boilerplate TS Nuxt repo:
 
 ```bash
@@ -71,7 +73,7 @@ export default defineComponent<MyComponentProps>({
     age: Number,
     address: Object as PropType<Address>
   },
-  setup: function (props) {
+  setup: (props) => {
     const { name, age, address } = props
     return () => (
       <div>
@@ -84,3 +86,47 @@ export default defineComponent<MyComponentProps>({
   },
 })
 ```
+
+# Adding `v-model` Support
+
+To add support for `v-model`, do the following:
+
+```sh
+yarn add --dev @vue/babel-sugar-v-model
+```
+
+Then, add the plugin to your `nuxt-config.(js|ts)`:
+```js
+  /*
+   ** Build configuration
+   ** See https://nuxtjs.org/api/configuration-build/
+   */
+  build: {
+    babel: {
+      plugins: ['module:@vue/babel-sugar-v-model'],
+      presets: ['@nuxt/babel-preset-app', 'vca-jsx'],
+    },
+  },
+```
+
+Note the use of `module:` prefix here, this is because Babel will try to prepend `babel-plugin` to the package name by default.
+Now, you can use `v-model` =)
+
+```ts
+import { defineComponent, reactive } from 'nuxt-composition-api'
+
+export default defineComponent({
+  setup: (props) => {
+    const state = reactive({
+      text: 'changeme',
+    })
+
+    return () => (
+      <div>
+        <input v-model={state.text} />
+        <p>Value {state.text}</p>
+      </div>
+    )
+  },
+})
+```
diff --git a/guide.md b/guide.md
@@ -0,0 +1,86 @@
+Use `create-nuxt-app` and enable the Typescript related options to scaffold a new boilerplate TS Nuxt repo:
+
+```bash
+yarn create nuxt-app <my-project>
+# or
+npx create-nuxt-app <my-project>
+```
+
+This should install `@nuxt/typescript-runtime` and `@nuxt/typescript-built`, plus `@nuxt/exlint-config-typescript`.
+Next, run the following:
+```sh
+yarn add nuxt-composition-api
+yarn add --dev @nuxt/babel-preset-app babel-preset-vca-jsx@beta vue-tsx-support
+```
+
+`vue-tsx-support` is the primary provider of TSX functionality, it requires `babel-preset-vca-jsx` to work properly with the Composition API.
+`@nuxt/babel-preset-app` is required as the default base to build off of, so that the other plugin works.
+
+https://github.com/wonderful-panda/vue-tsx-support
+https://github.com/luwanquan/babel-preset-vca-jsx
+
+In `nuxt.config.(js|ts)`, import `vue-tsx-support/enable-check` (you could import it anywhere theoretically, but this seems a good spot) and configure the `build.babel` property, as well as add `nuxt-composition-api` to `buildModules`:
+
+```js
+import 'vue-tsx-support/enable-check'
+export default {
+  // <SNIPPED>
+  /*
+   ** Nuxt.js dev-modules
+   */
+  buildModules: [
+    '@nuxt/typescript-build',
+    'nuxt-composition-api',
+  ],
+
+  /*
+   ** Build configuration
+   ** See https://nuxtjs.org/api/configuration-build/
+   */
+  build: {
+    babel: {
+      presets: ['@nuxt/babel-preset-app', 'vca-jsx'],
+    },
+  },
+
+ // <SNIPPED>
+}
+```
+
+Now you should be able to write fully type-checked TSX Components (even mixed in with regular components) using the Composition API =d
+```tsx
+import { defineComponent, PropType } from 'nuxt-composition-api'
+
+// This isn't necessary, but can be useful if you want to export and
+// strongly type the props being passed from another component
+interface MyComponentProps {
+  name: string
+  age: number
+  address: Address
+}
+
+interface Address {
+  street: string
+  zip: number
+}
+
+export default defineComponent<MyComponentProps>({
+  name: 'MyComponent',
+  props: {
+    name: String,
+    age: Number,
+    address: Object as PropType<Address>
+  },
+  setup: function (props) {
+    const { name, age, address } = props
+    return () => (
+      <div>
+        <p>{name}</p>
+        <p>{age}</p>
+        <p>{address.street}</p>
+        <p>{address.zip}</p>
+      </div>
+    )
+  },
+})
+```