nuxt-community / Nuxt Class Component
Licence: mit
ES / TypeScript decorator for class-style Nuxt/Vue components
Stars: ✭ 114
Programming Languages
typescript
32286 projects
Projects that are alternatives of or similar to Nuxt Class Component
Quillcms
QuillCMS, A Content Management System build with Node.js, Express, Nuxt.js and MongoDB.
Stars: ✭ 96 (-15.79%)
Mutual labels: nuxt
Cda Locale
Showing Microsoft Cloud Developer Advocates speaking, 2017 and 2018
Stars: ✭ 101 (-11.4%)
Mutual labels: nuxt
Vue Api Query
💎 Elegant and simple way to build requests for REST API
Stars: ✭ 1,528 (+1240.35%)
Mutual labels: nuxt
Nuxtdoc
A setup to build beautiful documentation with Nuxt and Storyblok deployed on Netlify for everyone
Stars: ✭ 100 (-12.28%)
Mutual labels: nuxt
Nuxt Netlify
Dynamically generate `_headers` and `_redirects` files for Netlify in your Nuxt.js projects
Stars: ✭ 97 (-14.91%)
Mutual labels: nuxt
Dayjs Module
Official Day.js module for your Nuxt.js project.
Stars: ✭ 111 (-2.63%)
Mutual labels: nuxt
Vue Svg Inline Loader
Webpack loader used for inline replacement of SVG images with actual content of SVG files in Vue projects.
Stars: ✭ 105 (-7.89%)
Mutual labels: nuxt
Bitwave
Front end for [bitwave.tv] - an open platform live video streaming service
Stars: ✭ 113 (-0.88%)
Mutual labels: nuxt
Infoboard
Infoboard showing time, weather, calendar events, photos from local folder or online sources as background and Transport for London status updates. Intended for Raspberry Pi, but should work on any machine with NodeJS available.
Stars: ✭ 111 (-2.63%)
Mutual labels: nuxt
Deprecated Repository
Please consider using nuxt-property-decorator instead.
Nuxt Class Component
ES and Typescript Class Components Decorators for Nuxt.js extending vue-class-component
Installation
npm install --save nuxt-class-component
# or
yarn add nuxt-class-component
Babel Instructions
npm install --save-dev babel-plugin-transform-decorators-legacy babel-plugin-transform-class-properties
# or
yarn add --dev babel-plugin-transform-decorators-legacy babel-plugin-transform-class-properties
Then you can configure Babel plugins on nuxt.config.js
- Plugin order is important (see here):
module.exports = {
build: {
babel: {
plugins: ['transform-decorators-legacy', 'transform-class-properties']
}
}
}
Typescript Instructions
You will need to enable [experimentalDecorators
] on your Typescript compiler.(http://www.typescriptlang.org/docs/handbook/decorators.html).
- Using Typescript Compiler argument
--experimentalDecorators
like this:
tsc --experimentalDecorators
- Using
tsconfig.json
:
{
"compilerOptions": {
"experimentalDecorators": true,
...
}
}
Usage
See vue-class-component, vuex-class documentation.
You can also see the official TypeScript examples of Nuxt.js.
Example
import Vue from 'vue'
import Component from 'nuxt-class-component'
import {
State,
Getter,
Action,
Mutation,
namespace
} from 'vuex-class'
const Module = namespace('path/to/module')
@Component({
props: {
propMessage: String
}
})
export class MyComp extends Vue {
@State('foo') stateFoo
@State(state => state.bar) stateBar
@Getter('foo') getterFoo
@Action('foo') actionFoo
@Mutation('foo') mutationFoo
@Module.Getter('foo') moduleGetterFoo
@Module.Action('foo') moduleActionFoo
// If the argument is omitted, use the property name
// for each state/getter/action/mutation type
@State foo
@Getter bar
@Action baz
@Mutation qux
// initial data
msg = 123
// use prop values for initial data
helloMsg = 'Hello, ' + this.propMessage
// lifecycle hooks
created () {
this.stateFoo // -> store.state.foo
this.stateBar // -> store.state.bar
this.getterFoo // -> store.getters.foo
this.actionFoo({ value: true }) // -> store.dispatch('foo', { value: true })
this.mutationFoo({ value: true }) // -> store.commit('foo', { value: true })
this.moduleGetterFoo // -> store.getters['path/to/module/foo']
}
mounted () {
this.greet()
}
fetch () {
// fetch data
}
async asyncData () {
// async fetching data
}
// computed
get computedMsg () {
return 'computed ' + this.msg
}
// method
greet () {
alert('greeting: ' + this.msg)
}
}
License
MIT License - Copyright (c) Nuxt Community
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].