Comments (11)
Yes, let me explain. Those modules bring type checking for properties unique to Nuxt such as fetch or middleware functions on the Component object. Let's look at this code:
import Component from "vue-class-component"
@Component({
fetch(){
console.log("Fetch")
}
})
So if you'll import Component from vue-class-component
you will get a TS error:
TS2345: Argument of type '{ fetch(): void; }' is not assignable to parameter of type 'VueClass<Vue>'.
Object literal may only specify known properties, and 'fetch' does not exist in type 'VueClass<Vue>'.
Importing from nuxt-class-component
you won't get such error
The same logic goes around nuxt-property-decorator
. Though I've found a silly mistake in this module, it doesn't use nuxt-class-component internally, which should be corrected. I logged a related issue in their repo: nuxt-community/nuxt-property-decorator#1
Once that will be fixed we will be able to remove these unneeded dependencies:
vue-class-component
nuxt-class-component
vue-property-decorator
all of those are covered by
nuxt-property-decorator
Import of the component should be changed to
import { Component } from "nuxt-property-decorator"
from typescript-template.
Yes, I agree that right now nuxt-property-decorator
might be a bit accessive to have its own module, but logically it's a good option to have. Once Nuxt will evolve and will have more functionality and structure that module will become more and more to the point.
Do you want to participate in maintaining that?
Yes, sure. But I guess I will first try to push my suggestions to the existing repo to not create duplicated npm packages
from typescript-template.
I still have no idea what nuxt-property-decorator
and nuxt-class-component
bring to the table over vue-property-decorator
and vue-class-component
. Do you know?
from typescript-template.
Totally agree with import { Component } from "nuxt-property-decorator"
, that's how it was done with vue-property-decorator
all along.
Not so sure about the whole nuxt-
modules though:
Only "page" level components get these new hooks, so normal components should be vue-class-component
from typescript-template.
Yeah, but then again nuxt-class-component
has vue-class-component
as a dependency, so there is no reason to include it as a root level dependency
from typescript-template.
There's a point of view that anything you import
directly in your code should be a dependency.
In some cases it makes sense to break this rule, for example with nuxt
's vue
.
I am not sure yet if this is one of those cases.
from typescript-template.
I'm not sure I've ever heard of such rule. What is the benefit of it?
from typescript-template.
- It doesn't matter what your dependencies import. If
nuxt-class-component
decides to rewrite for zero dependencies,vue-class-component
won't disappear and break your code. - Your direct dependency stays of the version range you specified, even if the same dependency changes version as a sub-dependency.
from typescript-template.
Yeah, makes sense
from typescript-template.
@qm3ster I've looked closely into an existing nuxt-property-decorator
project's code and it doesn't make sense to me. As you've mentioned before it doesn't have any differences from vue-property-decorator
. I logged an issue in it's repo about this but seems that an author of the module is busy with some other stuff and won't be able to support the lib properly. Maybe we should create a completely new module? I don't think it will be a complicated one. We can just import vue-property-decorator
as a dependency and export Component from 'nuxt-class-component'. The gist of the module will look smth. like this:
// nuxt-property-decorator.ts
import Component from 'nuxt-class-component'
import {Constructor, Emit, Inject, Model, Prop, Provide, Watch} from 'vue-property-decorator'
export {Component, Constructor, Emit, Inject, Model, Prop, Provide, Watch}
what do you think about this?
from typescript-template.
Do you want to participate in maintaining that?
I fear that it's halfway between a "hook" into projects to add functionality in an update and indulging the "Not Invented Here" syndrome, similar to nuxt-link
.
from typescript-template.
Related Issues (20)
- How to include vuetify package? HOT 1
- How do i can debug it in VS Code? HOT 1
- Interface 'NuxtApp' incorrectly extends interface 'Vue'. Types of property '$loading' are incompatible. HOT 2
- GitHub issue template points to wrong CMTY app address HOT 1
- When using this inside the head() function of a component, this does not let you access computed HOT 4
- Action Required: Fix Renovate Configuration
- Dependency Dashboard
- Any plans to upgrade @nuxtjs/composition-api to 0.33.0? HOT 1
- Nuxt 3 Support HOT 2
- [Critical] - Build is failing. Missing dependency nuxt-property-decorator HOT 27
- vue-dev-tools do not work HOT 4
- Nuxt Edge - Issue when running/building the project HOT 4
- Nuxt.js fetch functionality HOT 1
- Update TypeScript HOT 1
- Update TypeScript version HOT 3
- Not compatible with nuxt 2.0.0 HOT 12
- asyncData not working HOT 1
- TypeScript template has error when installing in latest version HOT 4
- axios 编辑器一直报错 HOT 1
- Fresh Installed and got this error HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from typescript-template.