docs(website): revamp the Vue documentation to latest changes

Author: christianalfoni

packages/overmind-website/examples/guide/connectingcomponents/actions.ts

@@ -36,19 +36,11 @@ export const toggleAwesomeApp = ({ state }) =>
       fileName: 'components/App.vue (template)',
       target: 'markup',
       code: `
-<button v-on:click="overmind.actions.toggleAwesomeApp()">
+<button @click="actions.toggleAwesomeApp()">
   Toggle awesome
 </button>
     `,
     },
-    {
-      fileName: 'components/App.vue (script)',
-      code: `
-import { connect } from '../overmind'
-
-export default connect({})
-  `,
-    },
   ],
 }
 

packages/overmind-website/examples/guide/connectingcomponents/array_1.ts

@@ -20,17 +20,9 @@ export default connect(List)
       fileName: 'components/List.vue (template)',
       target: 'markup',
       code: `
-<h1>{{overmind.state.items}}</h1>
+<h1>{{ state.items }}</h1>
     `,
     },
-    {
-      fileName: 'components/List.vue (script)',
-      code: `
-import { connect } from '../overmind'
-
-export default connect({})
-  `,
-    },
   ],
 }
 

packages/overmind-website/examples/guide/connectingcomponents/array_2.ts

@@ -25,20 +25,12 @@ export default connect(List)
       target: 'markup',
       code: `
 <ul>
-  <li v-for="item in overmind.state.items" :key="item.id>
-  {{ item.title }}
+  <li v-for="item in state.items" :key="item.id>
+    {{ item.title }}
   </li>
 </ul>
     `,
     },
-    {
-      fileName: 'components/List.vue (script)',
-      code: `
-import { connect } from '../overmind'
-
-export default connect({})
-  `,
-    },
   ],
 }
 

packages/overmind-website/examples/guide/connectingcomponents/array_3.ts

@@ -39,39 +39,36 @@ export default connect(App)
       fileName: 'components/Item.vue (template)',
       target: 'markup',
       code: `
-<li>{{ item.title }}</li>
+{{ item.title }}
     `,
     },
     {
       fileName: 'components/Item.vue (script)',
       code: `
-import { connect } from '../overmind'
-
-export default connect({
+export default {
   props: ['item']
-})
+}
   `,
     },
     {
       fileName: 'components/List.vue (template)',
       target: 'markup',
       code: `
 <ul>
-  <li is="Item" v-for="item in overmind.state.items" v-bind:item="item" :key="item.id" />
+  <li is="Item" v-for="item in state.items" :item="item" :key="item.id" />
 </ul>
     `,
     },
     {
       fileName: 'components/List.vue (script)',
       code: `
-import { connect } from '../overmind'
 import Item from './Item'
 
-export default connect({
+export default {
   components: {
     Item,
   },
-})
+}
   `,
     },
   ],

packages/overmind-website/examples/guide/connectingcomponents/connect.ts

@@ -24,20 +24,12 @@ export default connect(App)
       fileName: 'components/App.vue (template)',
       target: 'markup',
       code: `
-<div v-if="overmind.state.isLoading">
+<div v-if="state.isLoading">
   Loading app...
 </div>
 <h1 v-else>My awesome app</h1>
     `,
     },
-    {
-      fileName: 'components/App.vue (script)',
-      code: `
-import { connect } from '../overmind'
-
-export default connect({})
-  `,
-    },
   ],
 }
 

packages/overmind-website/examples/guide/connectingcomponents/effects.ts

@@ -40,9 +40,7 @@ export default connect(Article)
     {
       fileName: 'components/Article.vue (script)',
       code: `
-import { connect } from '../overmind'
-
-export default connect({
+export default {
   mounted() {
     this.disposeEffect = this.overmind.addMutationListener(() => {
       if (mutation.path === 'currentArticle') {
@@ -53,7 +51,7 @@ export default connect({
   destroyed() {
     this.disposeEffect()
   }
-})
+}
   `,
     },
   ],

packages/overmind-website/examples/guide/connectingcomponents/object_1.ts

@@ -20,17 +20,9 @@ export default connect(List)
       fileName: 'components/List.vue (template)',
       target: 'markup',
       code: `
-<h1>{{overmind.state.items}}</h1>
+<h1>{{ state.items }}</h1>
     `,
     },
-    {
-      fileName: 'components/List.vue (script)',
-      code: `
-import { connect } from '../overmind'
-
-export default connect({})
-  `,
-    },
   ],
 }
 

packages/overmind-website/examples/guide/connectingcomponents/object_2.ts

@@ -39,39 +39,36 @@ export default connect(App)
       fileName: 'components/Item.vue (template)',
       target: 'markup',
       code: `
-<li>{{ item.title }}</li>
+{{ item.title }}
     `,
     },
     {
       fileName: 'components/Item.vue (script)',
       code: `
-import { connect } from '../overmind'
-
-export default connect({
+export default {
   props: ['item']
-})
+}
   `,
     },
     {
       fileName: 'components/List.vue (template)',
       target: 'markup',
       code: `
 <ul>
-  <li is="Item" v-for="item in overmind.state.items" v-bind:item="item" :key="item.id" />
+  <li is="Item" v-for="item in state.items" :item="item" :key="item.id" />
 </ul>
     `,
     },
     {
       fileName: 'components/List.vue (script)',
       code: `
-import { connect } from '../overmind'
 import Item from './Item'
 
-export default connect({
+export default {
   components: {
     Item,
   },
-})
+}
   `,
     },
   ],

packages/overmind-website/examples/guide/getstarted/connectapp.ts

@@ -28,20 +28,12 @@ export default connect(Posts)
       fileName: 'Posts.vue (template)',
       target: 'markup',
       code: `
-<h4 v-if="overmind.state.isLoadingPosts">
+<h4 v-if="state.isLoadingPosts">
   Loading posts...
 </h4>
 <div v-else></div>
     `,
     },
-    {
-      fileName: 'Posts.vue (script)',
-      code: `
-import { connect } from '../overmind'
-
-export default connect({})
-  `,
-    },
   ],
 }
 

packages/overmind-website/examples/guide/getstarted/loadingposts.ts

@@ -27,18 +27,12 @@ export default Posts
       fileName: 'Posts.vue (template)',
       target: 'markup',
       code: `
-<h4 v-if="overmind.state.isLoadingPosts">
+<h4 v-if="state.isLoadingPosts">
   Loading posts...
 </h4>
 <div v-else></div>
     `,
     },
-    {
-      fileName: 'Posts.vue (script)',
-      code: `
-export default {}
-  `,
-    },
   ],
 }