Replace nuxt-class-component to nuxt-property-decorator (#2168)

* replace nuxt-class-component to nuxt-property-decorator * fix package-lock.json * fix remark docs Co-authored-by: mshcherbak <[email protected]>
wemake-services · Apr 18, 2021 · 7713121 · 7713121
1 parent fe9d599
commit 7713121
Show file tree

Hide file tree

Showing 9 changed files with 7,049 additions and 10,154 deletions.
diff --git a/template/client/components/ActionBar.vue b/template/client/components/ActionBar.vue
@@ -11,7 +11,7 @@
 </template>
 
 <script lang="ts">
-import Component, { mixins } from 'nuxt-class-component'
+import { Component, mixins } from 'nuxt-property-decorator'
 
 import { RawCommentType } from '~/logic/comments/models'
 import TypedStoreMixin from '~/mixins/typed-store'

diff --git a/template/client/components/AppLogo.vue b/template/client/components/AppLogo.vue
@@ -15,7 +15,7 @@
 </template>
 
 <script lang="ts">
-import Component from 'nuxt-class-component'
+import { Component } from 'nuxt-property-decorator'
 import Vue from 'vue'
 
 // @vue/component

diff --git a/template/client/components/Comment.vue b/template/client/components/Comment.vue
@@ -31,7 +31,7 @@
 </template>
 
 <script lang="ts">
-import Component, { mixins } from 'nuxt-class-component'
+import { Component, mixins } from 'nuxt-property-decorator'
 import { Prop } from 'vue-property-decorator'
 
 import { CommentType } from '~/logic/comments/types'

diff --git a/template/client/mixins/typed-store.ts b/template/client/mixins/typed-store.ts
@@ -1,4 +1,4 @@
-import Component from 'nuxt-class-component'
+import { Component } from 'nuxt-property-decorator'
 import Vue from 'vue'
 import { useStore } from 'vuex-simple'
 

diff --git a/template/client/pages/index.vue b/template/client/pages/index.vue
@@ -17,7 +17,7 @@
 </template>
 
 <script lang="ts">
-import Component, { mixins } from 'nuxt-class-component'
+import { Component, mixins } from 'nuxt-property-decorator'
 import { Store } from 'vuex'
 import { useStore } from 'vuex-simple'
 

diff --git a/template/docs/template/typescript.md b/template/docs/template/typescript.md
@@ -28,8 +28,7 @@ that are required for our app. Like:
 
 ## Supporting packages
 
-We use [`nuxt-class-component`](https://github.com/nuxt-community/nuxt-class-component) 
-and [`nuxt-property-decorator`](https://github.com/nuxt-community/nuxt-property-decorator) 
+We use [`nuxt-property-decorator`](https://github.com/nuxt-community/nuxt-property-decorator) 
 to make our `Vue` components type-safe.
 
 We also use [`vuex-class`](https://github.com/ktsn/vuex-class) 

diff --git a/template/docs/template/vue.md b/template/docs/template/vue.md
@@ -21,19 +21,16 @@ Here you can have a brief overview of what is going on inside `Nuxt`:
 
 We do not recommend to switch to raw `Vue`, unless you 100% sure.
 
-## nuxt-class-component
+## nuxt-property-decorator
 
 First of all, we use `class`es to define components. 
 We do it with the help of several libraries:
 
-1. [`nuxt-class-component`][nuxt-class-component] - pretty much the same as
-   [`vue-class-component`][vue-class-component], but with `nuxt` specific 
-   callbacks defined
+1. [`nuxt-property-decorator`][nuxt-property-decorator] - pretty much the same
+   as [`vue-class-component`][vue-class-component], but with `nuxt` specific 
+   callbacks defined & allows defining some useful properties using decorators
 
-2. [`nuxt-property-decorator`][nuxt-property-decorator] that allows defining 
-   some useful properties using decorators
-
-3. [`vuex-class`][vuex-class] that allows defining bindings to `vuex`
+2. [`vuex-class`][vuex-class] that allows defining bindings to `vuex`
 
 This way we can achieve *some* level of type safety. It is not 100% safe.
 But it is something.
@@ -95,7 +92,7 @@ And used:
 
 ```ts
 import Vue from 'vue'
-import Component from 'nuxt-class-component'
+import { Component } from 'nuxt-property-decorator'
 import { useStore } from 'vuex-simple'
 
 // Import your store:
@@ -170,7 +167,6 @@ import { Container } from 'vue-typedi'
 import tokens from '~/logic/tokens'
 ```
 
-[nuxt-class-component]: https://github.com/nuxt-community/nuxt-class-component
 [vue-class-component]: https://github.com/vuejs/vue-class-component
 [nuxt-property-decorator]: https://github.com/nuxt-community/nuxt-property-decorator
 [vuex-class]: https://github.com/ktsn/vuex-class/