vue-sugar v1.0.6

vue-sugar

Some sugar for happy Vue development.

Write beautiful class based Vue components with modern javascript.

Also the accompanied webpack loader does some simple transformation on the class making it possible to fully support the modern nature of classes.

Also with the loader all classes are made truely unique, prefixed with component name.

Please note that Vue's builtin scoped style feature is great and fully supported, however it does not prevent global styles from bleeding into your scoped components. Using the accompanied webpack loader global styles will no longer affect your component styles.

Install

npm i --save vue-sugar

Webpack configuration using @vue/cli version 3

module.exports = {
  configureWebpack: config => {
    config.module.rules.unshift({
      test: /\.vue$/,
      exclude: /node_modules/,
      enforce: 'pre',
      use: 'vue-sugar/loader.js'
    })
  },

Webpack configuration using standard webpack.config.js

module: {
  rules: [
    {
      test: /\.vue$/,
      exclude: /node_modules/,
      enforce: 'pre',
      use: 'vue-sugar/loader.js'
    }
  ]
}

Usage

<template>
  <div>{{name}}</div>
</template>
<script>
  import { Component } from 'vue-sugar';
  @Component()
  export default class {
    name = 'John Doe';
  }
</script>  

Example

<template>
  <div class="main" :changedName="changedName">
    <p>Name: {{fullName}}</p>
    <p>Changed: {{changedName ? 'True' : 'False'}}</p>
    <button @click="changeName" class="button">Change Name</button>
    <!-- <OtherComponent/> -->
  </div>
</template>
<script>
  import { Component } from 'vue-sugar';
  // import OtherComponent from './OtherComponent.vue';
  @Component()
  export default class User {
    props = ['id', 'enabled']; // or props: { id: { type:Number } }
    // OtherComponent = OtherComponent;
    firstName = 'John';
    lastName = 'Doe';
    changedName = false;
    get fullName() {
      return `${this.firstName} ${this.lastName}`;
    }
    set setName([a, b]) {
      this.firstName = a;
      this.lastName = b;
    }
    changeName() {
      this.setName = ['Robot', 'Man'];
      this.changedName = true;
    }
    created() {
      console.log('Component Created');
    }
  }
</script>
<style lang="scss">
  .main {
    color: blue;
    font-size: 14px;
  }
  .main[changedName] {
    font-weight: bold;
  }
  button {
    outline: none;
    color: black;
  }
</style>

If you do not like to pass props and components in the class the @Component decorator accepts the exact same options.

<script>
  import { Component } from 'vue-sugar';
  @Component({
    props: ['id', 'enabled'], // or props: { id: { type:Number } }
    components: { OtherComponent }
  })
  export default class User {
  }
</script>