pixelmattersdev · November 4, 2022 10:12 · Nov 4, 2022 · Nov 4, 2022 · Nov 3, 2022 · Nov 3, 2022
diff --git a/01-package-json.ts → 01-package.json.js b/01-package-json.ts → 01-package.json.js
diff --git a/vue2-filters.vue → 23-vue2-filters.vue b/vue2-filters.vue → 23-vue2-filters.vue
diff --git a/vue3-filters.vue → 23-vue3-filters.vue b/vue3-filters.vue → 23-vue3-filters.vue
diff --git a/vue2-is.vue → 24-vue2-is.vue b/vue2-is.vue → 24-vue2-is.vue
diff --git a/vue3-is.vue → 24-vue3-is.vue b/vue3-is.vue → 24-vue3-is.vue
diff --git a/vue3-vmon-vmoff-vmonce-mitt.ts → 25-vue3-vmon-vmoff-vmonce-mitt.ts b/vue3-vmon-vmoff-vmonce-mitt.ts → 25-vue3-vmon-vmoff-vmonce-mitt.ts
diff --git a/vue2-vmon-vmoff-vmonce.ts → 26-vue2-vmon-vmoff-vmonce.ts b/vue2-vmon-vmoff-vmonce.ts → 26-vue2-vmon-vmoff-vmonce.ts
diff --git a/vue3-vmon-vmoff-vmonce.ts → 26-vue3-vmon-vmoff-vmonce.ts b/vue3-vmon-vmoff-vmonce.ts → 26-vue3-vmon-vmoff-vmonce.ts
diff --git a/vue2-native.vue → 27-vue2-native.vue b/vue2-native.vue → 27-vue2-native.vue
diff --git a/vue3-native.vue → 27-vue3-native.vue b/vue3-native.vue → 27-vue3-native.vue
diff --git a/vue2-vmchildren.vue → 28-vue2-vmchildren.vue b/vue2-vmchildren.vue → 28-vue2-vmchildren.vue
diff --git a/vue3-vmchildren.vue → 28-vue3-vmchildren.vue b/vue3-vmchildren.vue → 28-vue3-vmchildren.vue
diff --git a/vue2-vmlisteners.vue → 29-vue2-vmlisteners.vue b/vue2-vmlisteners.vue → 29-vue2-vmlisteners.vue
diff --git a/vue3-vmlisteners.vue → 29-vue3-vmlisteners.vue b/vue3-vmlisteners.vue → 29-vue3-vmlisteners.vue
diff --git a/vue3-watching-arrays.vue → 30-vue3-watching-arrays.vue b/vue3-watching-arrays.vue → 30-vue3-watching-arrays.vue
diff --git a/vue2-async-components.ts → 31-vue2-async-components.ts b/vue2-async-components.ts → 31-vue2-async-components.ts
diff --git a/vue3-async-components.ts → 31-vue3-async-components.ts b/vue3-async-components.ts → 31-vue3-async-components.ts
diff --git a/vue2-removing-attributes.vue → 32-vue2-removing-attributes.vue b/vue2-removing-attributes.vue → 32-vue2-removing-attributes.vue
diff --git a/vue3-removing-attributes.vue → 32-vue3-removing-attributes.vue b/vue3-removing-attributes.vue → 32-vue3-removing-attributes.vue
diff --git a/vue2-vuex.ts → 33-vue2-vuex.ts b/vue2-vuex.ts → 33-vue2-vuex.ts
diff --git a/vue3-vuex.ts → 33-vue3-vuex.ts b/vue3-vuex.ts → 33-vue3-vuex.ts
diff --git a/vue2-vuerouter.ts → 34-vue2-vuerouter.ts b/vue2-vuerouter.ts → 34-vue2-vuerouter.ts
diff --git a/vue3-vuerouter.ts → 34-vue3-vuerouter.ts b/vue3-vuerouter.ts → 34-vue3-vuerouter.ts
diff --git a/vue3-new-history-option.ts → 35-vue3-new-history-option.ts b/vue3-new-history-option.ts → 35-vue3-new-history-option.ts
diff --git a/vue2-router-link-prop-tag.vue → 36-vue2-router-link-prop-tag.vue b/vue2-router-link-prop-tag.vue → 36-vue2-router-link-prop-tag.vue
diff --git a/vue3-router-link-prop-tag.vue → 36-vue3-router-link-prop-tag.vue b/vue3-router-link-prop-tag.vue → 36-vue3-router-link-prop-tag.vue
diff --git a/vue3-typescript-support.ts → 37-vue3-vuex-typescript-support.ts b/vue3-typescript-support.ts → 37-vue3-vuex-typescript-support.ts
diff --git a/vue2-fix-typescript-support.ts → 38-vue2-fix-typescript-support.ts b/vue2-fix-typescript-support.ts → 38-vue2-fix-typescript-support.ts
diff --git a/vue3-fix-typescript-support.ts → 38-vue3-fix-typescript-support.ts b/vue3-fix-typescript-support.ts → 38-vue3-fix-typescript-support.ts
diff --git a/vue2-augmenting-global-properties.ts → 39-vue2-augmenting-global-properties.ts b/vue2-augmenting-global-properties.ts → 39-vue2-augmenting-global-properties.ts
diff --git a/vue3-augmenting-global-properties.ts → 39-vue3-augmenting-global-properties.ts b/vue3-augmenting-global-properties.ts → 39-vue3-augmenting-global-properties.ts
diff --git a/package-json.ts → 01-package-json.ts b/package-json.ts → 01-package-json.ts
diff --git a/webpack.config.js → 02-webpack.config.js b/webpack.config.js → 02-webpack.config.js
diff --git a/vue2-named-and-scoped-slots.vue → 03-vue2-named-and-scoped-slots.vue b/vue2-named-and-scoped-slots.vue → 03-vue2-named-and-scoped-slots.vue
diff --git a/vue3-named-and-scoped-slots.vue → 03-vue3-named-and-scoped-slots.vue b/vue3-named-and-scoped-slots.vue → 03-vue3-named-and-scoped-slots.vue
diff --git a/vue2-functional-attributes.vue → 04-vue2-functional-attributes.vue b/vue2-functional-attributes.vue → 04-vue2-functional-attributes.vue
diff --git a/vue3-functional-attributes.vue → 04-vue3-functional-attributes.vue b/vue3-functional-attributes.vue → 04-vue3-functional-attributes.vue
diff --git a/vue2-vif-combined-with-vfor.vue → 05-vue2-vif-combined-with-vfor.vue b/vue2-vif-combined-with-vfor.vue → 05-vue2-vif-combined-with-vfor.vue
diff --git a/vue3-vif-combined-with-vfor.vue → 05-vue3-vif-combined-with-vfor.vue b/vue3-vif-combined-with-vfor.vue → 05-vue3-vif-combined-with-vfor.vue
diff --git a/vue2-vif-branched-keys.vue → 06-vue2-vif-branched-keys.vue b/vue2-vif-branched-keys.vue → 06-vue2-vif-branched-keys.vue
diff --git a/vue3-vif-branched-keys.vue → 06-vue3-vif-branched-keys.vue b/vue3-vif-branched-keys.vue → 06-vue3-vif-branched-keys.vue
diff --git a/vue2-vfor-keys-in-template.vue → 07-vue2-vfor-keys-in-template.vue b/vue2-vfor-keys-in-template.vue → 07-vue2-vfor-keys-in-template.vue
diff --git a/vue3-vfor-keys-in-template.vue → 07-vue3-vfor-keys-in-template.vue b/vue3-vfor-keys-in-template.vue → 07-vue3-vfor-keys-in-template.vue
diff --git a/vue2-transition-classes.scss → 08-vue2-transition-classes.scss b/vue2-transition-classes.scss → 08-vue2-transition-classes.scss
diff --git a/vue3-transition-classes.scss → 08-vue3-transition-classes.scss b/vue3-transition-classes.scss → 08-vue3-transition-classes.scss
diff --git a/vue2-app-initialization.ts → 09-vue2-app-initialization.ts b/vue2-app-initialization.ts → 09-vue2-app-initialization.ts
diff --git a/vue3-app-initialization.ts → 09-vue3-app-initialization.ts b/vue3-app-initialization.ts → 09-vue3-app-initialization.ts
diff --git a/vue2-global-api.ts → 10-vue2-global-api.ts b/vue2-global-api.ts → 10-vue2-global-api.ts
diff --git a/vue3-global-api.ts → 10-vue3-global-api.ts b/vue3-global-api.ts → 10-vue3-global-api.ts
diff --git a/vue2-extend-and-util.vue → 11-vue2-extend-and-util.vue b/vue2-extend-and-util.vue → 11-vue2-extend-and-util.vue
diff --git a/vue3-extend-and-util.ts → 11-vue3-extend-and-util.ts b/vue3-extend-and-util.ts → 11-vue3-extend-and-util.ts
diff --git a/vue2-adding-global-instances.ts → 12-vue2-adding-global-instances.ts b/vue2-adding-global-instances.ts → 12-vue2-adding-global-instances.ts
diff --git a/vue3-adding-global-instances.ts → 12-vue3-adding-global-instances.ts b/vue3-adding-global-instances.ts → 12-vue3-adding-global-instances.ts
diff --git a/vue2-reactive-property-setters.ts → 13-vue2-reactive-property-setters.ts b/vue2-reactive-property-setters.ts → 13-vue2-reactive-property-setters.ts
diff --git a/vue3-reactive-property-setters.ts → 13-vue3-reactive-property-setters.ts b/vue3-reactive-property-setters.ts → 13-vue3-reactive-property-setters.ts
diff --git a/vue2-$nextTick-deprecated.vue → 14-vue2-$nextTick-deprecated.vue b/vue2-$nextTick-deprecated.vue → 14-vue2-$nextTick-deprecated.vue
diff --git a/vue3-$nextTick-deprecated.vue → 14-vue3-$nextTick-deprecated.vue b/vue3-$nextTick-deprecated.vue → 14-vue3-$nextTick-deprecated.vue
diff --git a/vue2-lifecycle-hooks.vue → 15-vue2-lifecycle-hooks.vue b/vue2-lifecycle-hooks.vue → 15-vue2-lifecycle-hooks.vue
diff --git a/vue3-lifecycle-hooks.vue → 15-vue3-lifecycle-hooks.vue b/vue3-lifecycle-hooks.vue → 15-vue3-lifecycle-hooks.vue
diff --git a/vue3-events-must-be-declared.vue → 16-vue3-events-must-be-declared.vue b/vue3-events-must-be-declared.vue → 16-vue3-events-must-be-declared.vue
diff --git a/vue2-lifecycle-events.vue → 17-vue2-lifecycle-events.vue b/vue2-lifecycle-events.vue → 17-vue2-lifecycle-events.vue
diff --git a/vue3-lifecycle-events.vue → 17-vue3-lifecycle-events.vue b/vue3-lifecycle-events.vue → 17-vue3-lifecycle-events.vue
diff --git a/vue2-vmodel-prop.vue → 18-vue2-vmodel-prop.vue b/vue2-vmodel-prop.vue → 18-vue2-vmodel-prop.vue
diff --git a/vue3-vmodel-prop.vue → 18-vue3-vmodel-prop.vue b/vue3-vmodel-prop.vue → 18-vue3-vmodel-prop.vue
diff --git a/vue2-vmodel-event.vue → 19-vue2-vmodel-event.vue b/vue2-vmodel-event.vue → 19-vue2-vmodel-event.vue
diff --git a/vue3-vmodel-event.vue → 19-vue3-vmodel-event.vue b/vue3-vmodel-event.vue → 19-vue3-vmodel-event.vue
diff --git a/vue2-syncing-a-prop.vue → 20-vue2-syncing-a-prop.vue b/vue2-syncing-a-prop.vue → 20-vue2-syncing-a-prop.vue
diff --git a/vue3-syncing-a-prop.vue → 20-vue3-syncing-a-prop.vue b/vue3-syncing-a-prop.vue → 20-vue3-syncing-a-prop.vue
diff --git a/vue3-directives-final-api.ts → 21-vue3-directives-final-api.ts b/vue3-directives-final-api.ts → 21-vue3-directives-final-api.ts
diff --git a/vue2-custom-directives.ts → 22-vue2-custom-directives.ts b/vue2-custom-directives.ts → 22-vue2-custom-directives.ts
diff --git a/vue3-custom-directives.ts → 22-vue3-custom-directives.ts b/vue3-custom-directives.ts → 22-vue3-custom-directives.ts
diff --git a/vue2-vmchildren.vue b/vue2-vmchildren.vue
@@ -1,5 +1,5 @@
 <template>
-  <GreetingComponent>Hello World</GreetingComponent>
+  <CustomComponent>Hello World</CustomComponent>
 </template>
 
 <script lang="ts">

diff --git a/vue3-vmchildren.vue b/vue3-vmchildren.vue
@@ -1,5 +1,5 @@
 <template>
-  <GreetingComponent ref="greeting">Hello World</GreetingComponent>
+  <CustomComponent ref="greeting">Hello World</CustomComponent>
 </template>
 
 <script lang="ts">

diff --git a/vue2-augmenting-global-properties.ts b/vue2-augmenting-global-properties.ts
@@ -1,5 +1,5 @@
 declare module 'vue/types/vue' {
   export interface Vue {
-		$http: typeof axios
-	}
+    $http: typeof axios
+  }
 }
diff --git a/vue2-filters.vue b/vue2-filters.vue
@@ -1,3 +1,3 @@
 <template>
-	<p>{{ user.lastName | uppercase }}</p>
+  <p>{{ user.lastName | uppercase }}</p>
 </template>
diff --git a/vue2-fix-typescript-support.ts b/vue2-fix-typescript-support.ts
@@ -1,4 +1,4 @@
 declare module '*.vue' {
-	import Vue from 'vue'
-	export default Vue
+  import Vue from 'vue'
+  export default Vue
 }
diff --git a/vue2-functional-attributes.vue b/vue2-functional-attributes.vue
@@ -5,10 +5,10 @@
 <script>
 export default {
   props: {
-		title: {
+    title: {
       type: String,
       required: true,
     },
-	}
+  }
 }
 </script>
diff --git a/vue3-augmenting-global-properties.ts b/vue3-augmenting-global-properties.ts
@@ -1,5 +1,5 @@
 declare module '@vue/runtime-core' {
-	interface ComponentCustomProperties {
-		$http: typeof axios
-	}
+  interface ComponentCustomProperties {
+    $http: typeof axios
+  }
 }
diff --git a/vue3-filters.vue b/vue3-filters.vue
@@ -1,5 +1,5 @@
 <template>
-	<p>{{ uppercasedLastName }}</p>
+  <p>{{ uppercasedLastName }}</p>
 <template>
 
 <script lang="ts">

diff --git a/vue3-fix-typescript-support.ts b/vue3-fix-typescript-support.ts
@@ -1,5 +1,5 @@
 declare module '*.vue' {
-	import { defineComponent } from 'vue'
-	const component: ReturnType<typeof defineComponent>
-	export default component
+  import { defineComponent } from 'vue'
+  const component: ReturnType<typeof defineComponent>
+  export default component
 }
diff --git a/vue3-functional-attributes.vue b/vue3-functional-attributes.vue
@@ -5,10 +5,10 @@
 <script>
 export default {
   props: {
-		title: {
+    title: {
       type: String,
       required: true,
     },
-	}
+  }
 }
 </script>
diff --git a/vue3-vmchildren.vue b/vue3-vmchildren.vue
@@ -5,7 +5,7 @@
 <script lang="ts">
   export default {
     mounted() {
-	    console.log(this.$refs.greeting)
+      console.log(this.$refs.greeting)
     },
   }
 </script>
diff --git a/webpack.config.js b/webpack.config.js
@@ -2,7 +2,7 @@
 
 module.exports = {
 
-	// ...
+  // ...
 
   resolve: {
     alias: {

diff --git a/webpack.config.js b/webpack.config.js
@@ -17,7 +17,7 @@ module.exports = {
         options: {
           compilerOptions: {
             compatConfig: {
-							// Default everything to Vue 2 behavior
+              // Default everything to Vue 2 behavior
               MODE: 2
             }
           }

diff --git a/package.json → package-json.ts b/package.json → package-json.ts
diff --git a/vue2-augmenting-global-properties.ts b/vue2-augmenting-global-properties.ts
@@ -1,5 +1,5 @@
 declare module 'vue/types/vue' {
-	export interface Vue {
+  export interface Vue {
 		$http: typeof axios
 	}
 }
diff --git a/package.json b/package.json
@@ -0,0 +1,17 @@
+// package.json
+
+{
+
+  // ...
+
+  "dependencies": {
+      "vue": "^3.2.0", // UPDATE
+      "@vue/compat": "^3.2.0" // ADD
+      // ...
+  },
+  "devDependencies": {
+      "@vue/compiler-sfc": "^3.2.0" // ADD
+      "vue-template-compiler": "^2.6.0" // REMOVE
+      // ...
+  }
+}
diff --git a/vue2-$nextTick-deprecated.vue b/vue2-$nextTick-deprecated.vue
@@ -0,0 +1,5 @@
+<script lang="ts">
+  this.$nextTick(() => {
+    // something DOM-related
+  })
+</script>
diff --git a/vue2-adding-global-instances.ts b/vue2-adding-global-instances.ts
@@ -0,0 +1 @@
+Vue.prototype.$title = 'Some title'
diff --git a/vue2-app-initialization.ts b/vue2-app-initialization.ts
@@ -0,0 +1,7 @@
+import Vue from 'vue';
+import App from 'views/app/app.vue'
+
+new Vue({
+  router,
+  render: h => h(App)
+}).$mount('#app');
diff --git a/vue2-async-components.ts b/vue2-async-components.ts
@@ -0,0 +1,4 @@
+const MyComponent = {
+  component: () => import('./MyComponent.vue'),
+  // ...
+}
diff --git a/vue2-augmenting-global-properties.ts b/vue2-augmenting-global-properties.ts
@@ -0,0 +1,5 @@
+declare module 'vue/types/vue' {
+	export interface Vue {
+		$http: typeof axios
+	}
+}
diff --git a/vue2-custom-directives.ts b/vue2-custom-directives.ts
@@ -0,0 +1,3 @@
+bind(el, binding, vnode) {
+  const vm = vnode.context
+}
diff --git a/vue2-extend-and-util.vue b/vue2-extend-and-util.vue
@@ -0,0 +1,7 @@
+<script lang="ts">
+  import Vue from 'vue'
+
+  export default Vue.extend({
+    //
+  })
+</script>
diff --git a/vue2-filters.vue b/vue2-filters.vue
@@ -0,0 +1,3 @@
+<template>
+	<p>{{ user.lastName | uppercase }}</p>
+</template>
diff --git a/vue2-fix-typescript-support.ts b/vue2-fix-typescript-support.ts
@@ -0,0 +1,4 @@
+declare module '*.vue' {
+	import Vue from 'vue'
+	export default Vue
+}
diff --git a/vue2-functional-attributes.vue b/vue2-functional-attributes.vue
@@ -0,0 +1,14 @@
+<template functional>
+  <h1>{{ title }}</h1>
+</template>
+
+<script>
+export default {
+  props: {
+		title: {
+      type: String,
+      required: true,
+    },
+	}
+}
+</script>
diff --git a/vue2-global-api.ts b/vue2-global-api.ts
@@ -0,0 +1,5 @@
+import somePlugin from 'plugins/some-plugin'
+import someDirective from 'directives/some-directive'
+
+Vue.use(somePlugin);
+Vue.directive('some-directive', someDirective)
diff --git a/vue2-is.vue b/vue2-is.vue
@@ -0,0 +1,3 @@
+<template>
+  <button is="someComponent" />
+</template>
diff --git a/vue2-lifecycle-events.vue b/vue2-lifecycle-events.vue
@@ -0,0 +1,3 @@
+<template>
+  <MyComponent @hook:mounted="foo">
+</template>
diff --git a/vue2-lifecycle-hooks.vue b/vue2-lifecycle-hooks.vue
@@ -0,0 +1,11 @@
+<script lang="ts">
+  export default {
+    beforeDestroy() {
+      console.log('Before component unmounts!')
+    },
+
+    destroyed() {
+      console.log('Component unmounted!')
+    },
+  }
+</script>
diff --git a/vue2-named-and-scoped-slots.vue b/vue2-named-and-scoped-slots.vue
@@ -0,0 +1,7 @@
+<template>
+  <CustomDialog>
+    <template slot="heading" slot-scope="slotProps">
+      <h1>Items ({{ slotProps.items.length }})</h1>
+    </template>
+  </CustomDialog>
+</template>
diff --git a/vue2-native.vue b/vue2-native.vue
@@ -0,0 +1,3 @@
+<template>
+  <SpecialButton v-on:click.native="foo" />
+</template>
diff --git a/vue2-reactive-property-setters.ts b/vue2-reactive-property-setters.ts
@@ -0,0 +1,7 @@
+// set
+Vue.set(state.moduleName, 'keyName', 'value')
+vm.$set(state.moduleName, 'keyName', 'value')
+
+// delete
+Vue.delete(state.moduleName, 'keyName', 'value')
+vm.$delete(state.moduleName, 'keyName', 'value')
diff --git a/vue2-removing-attributes.vue b/vue2-removing-attributes.vue
@@ -0,0 +1,3 @@
+<template>
+  <p :alt="false">Hello</p>
+</template>
diff --git a/vue2-router-link-prop-tag.vue b/vue2-router-link-prop-tag.vue
@@ -0,0 +1,8 @@
+<template>
+  <router-link
+    :tag="info.id ? 'a' : 'div'"
+    :to="info.id ? { name: 'article', params: { id: info.id } } : {}"
+  >
+    {{ info.title }}
+  </router-link>
+<template>
diff --git a/vue2-syncing-a-prop.vue b/vue2-syncing-a-prop.vue
@@ -0,0 +1,3 @@
+<template>
+  <ChildComponent v-model="active" :title.sync="pageTitle" />
+</template>
diff --git a/vue2-transition-classes.scss b/vue2-transition-classes.scss
@@ -0,0 +1,11 @@
+<style lang="scss">
+  .v-enter,
+  .v-leave-to {
+    opacity: 0;
+  }
+
+  .v-leave,
+  .v-enter-to {
+    opacity: 1;
+  }
+</style>
diff --git a/vue2-vfor-keys-in-template.vue b/vue2-vfor-keys-in-template.vue
@@ -0,0 +1,5 @@
+<template>
+  <template v-for="item in list">
+    <div :key="item.id">{{ item.title }}</div>
+  </template>
+</template>
diff --git a/vue2-vif-branched-keys.vue b/vue2-vif-branched-keys.vue
@@ -0,0 +1,8 @@
+<template>
+  <ul>
+    <li v-for="item in list">
+      <p v-if="item.amount < 10" :key="item.id">{{ item.title }}</p>
+      <p v-else class="high" :key="item.id">{{ item.title }}</p>
+    </li>
+  </ul>
+</template>
diff --git a/vue2-vif-combined-with-vfor.vue b/vue2-vif-combined-with-vfor.vue
@@ -0,0 +1,9 @@
+<template>
+  <div 
+    v-if="list"
+    v-for="item in list"
+    :key="item.id"
+    :title="item.title">
+      {{ item.title }}
+  </div>
+</template>
diff --git a/vue2-vmchildren.vue b/vue2-vmchildren.vue
@@ -0,0 +1,11 @@
+<template>
+  <GreetingComponent>Hello World</GreetingComponent>
+</template>
+
+<script lang="ts">
+  export default {
+    mounted() {
+      console.log(this.$children[0])
+    },
+  }
+</script>
diff --git a/vue2-vmlisteners.vue b/vue2-vmlisteners.vue
@@ -0,0 +1,7 @@
+<script lang="ts">
+  export default {
+    mounted() {
+      console.log(this.$listeners)
+    }
+  }
+</script>
diff --git a/vue2-vmodel-event.vue b/vue2-vmodel-event.vue
@@ -0,0 +1,9 @@
+<script lang="ts">
+  export default {
+    methods: {
+      updateTitle() {
+        this.$emit('input')
+      }
+    }
+  }
+</script>
diff --git a/vue2-vmodel-prop.vue b/vue2-vmodel-prop.vue
@@ -0,0 +1,3 @@
+<template>
+  <CustomComponent v-model="title" />
+</template>
diff --git a/vue2-vmon-vmoff-vmonce.ts b/vue2-vmon-vmoff-vmonce.ts
@@ -0,0 +1 @@
+this.$on('clickAway', this.hidePopover)
diff --git a/vue2-vuerouter.ts b/vue2-vuerouter.ts
@@ -0,0 +1,5 @@
+import Router from 'vue-router'
+
+const router = new Router({
+  // ...
+})
diff --git a/vue2-vuex.ts b/vue2-vuex.ts
@@ -0,0 +1 @@
+export default new Vuex.Store<IRootState>(storeOptions)
diff --git a/vue3-$nextTick-deprecated.vue b/vue3-$nextTick-deprecated.vue
@@ -0,0 +1,7 @@
+<script lang="ts">
+  import { nextTick } from 'vue'
+
+  nextTick(() => {
+    // something DOM-related
+  })
+</script>
diff --git a/vue3-adding-global-instances.ts b/vue3-adding-global-instances.ts
@@ -0,0 +1 @@
+app.config.globalProperties.$title = 'Some title'
diff --git a/vue3-app-initialization.ts b/vue3-app-initialization.ts
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from 'views/app/app.vue'
+
+const app = createApp(App);
+app.mount('#app');
diff --git a/vue3-async-components.ts b/vue3-async-components.ts
@@ -0,0 +1,6 @@
+import { defineAsyncComponent } from 'vue'
+
+const MyComponent = defineAsyncComponent({
+  loader: () => import('./MyComponent.vue'),
+  // ...
+})
diff --git a/vue3-augmenting-global-properties.ts b/vue3-augmenting-global-properties.ts
@@ -0,0 +1,5 @@
+declare module '@vue/runtime-core' {
+	interface ComponentCustomProperties {
+		$http: typeof axios
+	}
+}
diff --git a/vue3-custom-directives.ts b/vue3-custom-directives.ts
@@ -0,0 +1,3 @@
+mounted(el, binding, vnode) {
+  const vm = binding.instance
+}
diff --git a/vue3-directives-final-api.ts b/vue3-directives-final-api.ts
@@ -0,0 +1,9 @@
+const MyDirective = {
+  created(el, binding, vnode, prevVnode) {},
+  beforeMount() {},
+  mounted() {},
+  beforeUpdate() {},
+  updated() {},
+  beforeUnmount() {},
+  unmounted() {}
+}
diff --git a/vue3-events-must-be-declared.vue b/vue3-events-must-be-declared.vue
@@ -0,0 +1,11 @@
+<script lang="ts">
+  export default {
+    emits: ['click'],
+
+    methods: {
+      onTitleClick(title) {
+        this.$emit('click', title)
+      }
+    }
+  }
+</script>
diff --git a/vue3-extend-and-util.ts b/vue3-extend-and-util.ts
@@ -0,0 +1,7 @@
+<script lang="ts">
+  import { defineComponent } from 'vue'
+
+  export default defineComponent({
+    //
+  })
+</script>
diff --git a/vue3-filters.vue b/vue3-filters.vue
@@ -0,0 +1,21 @@
+<template>
+	<p>{{ uppercasedLastName }}</p>
+<template>
+
+<script lang="ts">
+  export default {
+    computed: {
+      uppercasedLastName(): string {
+        return this.user.lastName.toUpperCase()		
+      }
+    },
+
+    // or alternatively
+    // {{ uppercaseText(user.lastName) }}
+    methods: {
+      uppercaseText(text: string) {
+        return text.toUpperCase()		
+      }
+    }
+  }
+</script>
diff --git a/vue3-fix-typescript-support.ts b/vue3-fix-typescript-support.ts
@@ -0,0 +1,5 @@
+declare module '*.vue' {
+	import { defineComponent } from 'vue'
+	const component: ReturnType<typeof defineComponent>
+	export default component
+}
diff --git a/vue3-functional-attributes.vue b/vue3-functional-attributes.vue
@@ -0,0 +1,14 @@
+<template>
+  <h1>{{ title }}</h1>
+</template>
+
+<script>
+export default {
+  props: {
+		title: {
+      type: String,
+      required: true,
+    },
+	}
+}
+</script>
diff --git a/vue3-global-api.ts b/vue3-global-api.ts
@@ -0,0 +1,5 @@
+import somePlugin from 'plugins/some-plugin'
+import someDirective from 'directives/some-directive'
+
+app.use(somePlugin);
+app.directive('some-directive', someDirective)
diff --git a/vue3-is.vue b/vue3-is.vue
@@ -0,0 +1,3 @@
+<template>
+  <component is="someComponent" />
+</template>
diff --git a/vue3-lifecycle-events.vue b/vue3-lifecycle-events.vue
@@ -0,0 +1,3 @@
+<template>
+  <MyComponent @vnode-mounted="foo">
+</template>
diff --git a/vue3-lifecycle-hooks.vue b/vue3-lifecycle-hooks.vue
@@ -0,0 +1,11 @@
+<script lang="ts">
+  export default {
+    beforeUnmount() {
+      console.log('Before component unmounts!')
+    },
+
+    unmounted() {
+      console.log('Component unmounted!')
+    },
+  }
+</script>
diff --git a/vue3-named-and-scoped-slots.vue b/vue3-named-and-scoped-slots.vue
@@ -0,0 +1,7 @@
+<template>
+  <CustomDialog>
+    <template #heading="slotProps">
+      <h1>Items ({{ slotProps.items.length }})</h1>
+    </template>
+  </CustomDialog>
+</template>
diff --git a/vue3-native.vue b/vue3-native.vue
@@ -0,0 +1,3 @@
+<template>
+  <SpecialButton v-on:click="foo" />
+</template>
diff --git a/vue3-new-history-option.ts b/vue3-new-history-option.ts
@@ -0,0 +1,7 @@
+import { createRouter, createWebHistory } from 'vue-router'
+// there is also createWebHashHistory and createMemoryHistory
+
+createRouter({
+  history: createWebHistory(),
+  routes: [],
+})
diff --git a/vue3-reactive-property-setters.ts b/vue3-reactive-property-setters.ts
@@ -0,0 +1,5 @@
+// set
+Object.assign(state.moduleName, { keyName: 'value' })
+
+// delete
+delete state.moduleName.keyName
diff --git a/vue3-removing-attributes.vue b/vue3-removing-attributes.vue
@@ -0,0 +1,3 @@
+<template>
+  <p :alt="null">Hello</p>
+</template>
diff --git a/vue3-router-link-prop-tag.vue b/vue3-router-link-prop-tag.vue
@@ -0,0 +1,9 @@
+<template>
+  <router-link
+    v-if="info.id"
+    :to="{ name: 'article', params: { id: info.id } }"
+  >
+    {{ info.title }}
+  </router-link>
+  <div v-else>{{ info.title }}</div>
+</template>
diff --git a/vue3-syncing-a-prop.vue b/vue3-syncing-a-prop.vue
@@ -0,0 +1,3 @@
+<template>
+  <ChildComponent v-model="active" v-model:title="pageTitle" />
+</template>
diff --git a/vue3-transition-classes.scss b/vue3-transition-classes.scss
@@ -0,0 +1,11 @@
+<style lang="scss">
+  .v-enter-from,
+  .v-leave-to {
+    opacity: 0;
+  }
+
+  .v-leave-from,
+  .v-enter-to {
+    opacity: 1;
+  }
+</style>
diff --git a/vue3-typescript-support.ts b/vue3-typescript-support.ts
@@ -0,0 +1,15 @@
+// vuex-shim.d.ts
+
+import { ComponentCustomProperties } from 'vue'
+import { Store } from 'vuex'
+
+// Your own store state
+interface IMyState {
+  count: number
+}
+
+declare module '@vue/runtime-core' {
+  interface ComponentCustomProperties {
+    $store: Store<IMyState>
+  }
+}
diff --git a/vue3-vfor-keys-in-template.vue b/vue3-vfor-keys-in-template.vue
@@ -0,0 +1,5 @@
+<template>
+  <template v-for="item in list" :key="item.id">
+    <div>{{ item.title }}</div>
+  </template>
+</template>
diff --git a/vue3-vif-branched-keys.vue b/vue3-vif-branched-keys.vue
@@ -0,0 +1,8 @@
+<template>
+  <ul>
+    <li v-for="item in list">
+      <p v-if="item.amount < 10">{{ item.title }}</p>
+      <p v-else class="high">{{ item.title }}</p>
+    </li>
+  </ul>
+</template>
diff --git a/vue3-vif-combined-with-vfor.vue b/vue3-vif-combined-with-vfor.vue
@@ -0,0 +1,10 @@
+<template>
+  <template v-if="list">
+    <div 
+      v-for="item in list"
+      :key="item.id"
+      :title="item.title">
+        {{ item.title }}
+    </div>
+  </template>
+</template>
diff --git a/vue3-vmchildren.vue b/vue3-vmchildren.vue
@@ -0,0 +1,11 @@
+<template>
+  <GreetingComponent ref="greeting">Hello World</GreetingComponent>
+</template>
+
+<script lang="ts">
+  export default {
+    mounted() {
+	    console.log(this.$refs.greeting)
+    },
+  }
+</script>
diff --git a/vue3-vmlisteners.vue b/vue3-vmlisteners.vue
@@ -0,0 +1,8 @@
+<script lang="ts">
+  export default {
+    mounted() {
+      console.log(this.$attrs.onClick)
+      console.log(this.$attrs.onMouseenter)
+    }
+  }
+</script>
diff --git a/vue3-vmodel-event.vue b/vue3-vmodel-event.vue
@@ -0,0 +1,13 @@
+<script lang="ts">
+  export default {
+
+    // Don't forget to list the event in the 'emits' option
+    emits: ['update:modelValue'],
+
+    methods: {
+      updateTitle() {
+        this.$emit('update:modelValue')
+      }
+    }
+  }
+</script>
diff --git a/vue3-vmodel-prop-alternative.vue b/vue3-vmodel-prop-alternative.vue
@@ -0,0 +1,15 @@
+<script lang="ts">
+  export default {
+    props: {
+      modelValue: String // previously was `value: String`
+    },
+
+    emits: ['update:modelValue'],
+
+    methods: {
+      changeTitle(title) {
+        this.$emit('update:modelValue', title)
+      }
+    }
+  }
+</script>
diff --git a/vue3-vmodel-prop.vue b/vue3-vmodel-prop.vue
@@ -0,0 +1,3 @@
+<template>
+  <CustomComponent v-model:value="title" />
+</template>
diff --git a/vue3-vmon-vmoff-vmonce-mitt.ts b/vue3-vmon-vmoff-vmonce-mitt.ts
@@ -0,0 +1,5 @@
+// e.g. in app.ts
+import mitt from 'mitt'
+
+const emitter = mitt()
+app.config.globalProperties.$emitter = emitter 
diff --git a/vue3-vmon-vmoff-vmonce.ts b/vue3-vmon-vmoff-vmonce.ts
@@ -0,0 +1 @@
+this.$emitter.on('clickAway', this.hidePopover)
diff --git a/vue3-vuerouter.ts b/vue3-vuerouter.ts
@@ -0,0 +1,5 @@
+import { createRouter } from 'vue-router'
+
+const router = createRouter({
+  // ...
+})
diff --git a/vue3-vuex.ts b/vue3-vuex.ts
@@ -0,0 +1 @@
+export default createStore(storeOptions)
diff --git a/vue3-watching-arrays.vue b/vue3-watching-arrays.vue
@@ -0,0 +1,12 @@
+<script lang="ts">
+  export default {
+    watch: {
+      someList: {
+        deep: true,
+        handler(val, oldVal) {
+          console.log('list was updated')
+        },
+      },
+    }
+  }
+</script>
diff --git a/webpack.config.js b/webpack.config.js
@@ -0,0 +1,28 @@
+// webpack.config.js
+
+module.exports = {
+
+	// ...
+
+  resolve: {
+    alias: {
+      vue: '@vue/compat'
+    }
+  },
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+        options: {
+          compilerOptions: {
+            compatConfig: {
+							// Default everything to Vue 2 behavior
+              MODE: 2
+            }
+          }
+        }
+      }
+    ]
+  }
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export default new Vuex.Store<IRootState>(storeOptions)
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		app.config.globalProperties.$title = 'Some title'
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		this.$emitter.on('clickAway', this.hidePopover)