Building Flexible Vue.js Components - Part 1

Chris Finnigan — Mon, 04 Nov 2019 16:59:05 +0000

Background

Frameworks such as Vue.js are really driving the transformation of web application UI's.
The developers dream of being able to build large scale applications, using small testable components is now a reality.

When building component based UIs. We want to keep code reuse high and code duplication low. With this in mind, an important step in achieving this goal, is ensuring that your components are designed and built with flexibility in mind.

Example - Counter Component

Github Repo: https://github.com/chrisfinnigan/counter-examples

We've built a counter component. It has it's own local data within the component. It increments and decrements the local data value by 1 every time the button is pressed.

<template>
  <div class="counter">
    <button @click='decrement()'>-1</button>
    <span class="counterOutput">{{count}}</span>
    <button @click='increment()'>+1</button> 
  </div>
</template>

<script>
  export default {
    name: 'Counter',
    data: () => {
      return {
        count: 0
      }
    },
    methods: {
      increment() {
        this.count++
      },
      decrement() {
        this.count--
      }
    }
  }
</script>

<style scoped lang="scss">
  .counter{
    min-width: 33%;
    margin: auto auto;
  }

  button{
    padding: 15px;
    font-size: 16px;
    margin: 15px;
    font-weight: bold;
  }

  .counterOutput{
    font-size: 16px;
    font-weight: bold;
  }
</style>

That's a great start, we've got a counter. It does what we needed it to do.

We can be more flexible though...

The next time we want to use this component, we want to increment by 10 instead of 1.
Our component doesn't support this. It would be great if we could make the increment/decrement values configurable.
No problem! We can refactor our existing component to let us do exactly that.

<template>
  <div class="counter">
    <button @click='decrement(by)'>-{{by}}</button>
    <span class="counterOutput">{{count}}</span>
    <button @click='increment(by)'>+{{by}}</button> 
  </div>
</template>

<script>
  export default {
    name: 'CounterProps',
    data: function () {
      return {
        count: 0
      }
    },
    methods: {
      increment (by) {
        this.count = this.count + by
      },
      decrement (by) {
        this.count = this.count - by
      }
    },
    props: {
      by: {
        required: true,
        type: Number
      }
    }
  }
</script>

<style scoped lang="scss">
  .counter{
    min-width: 33%;
    margin: auto auto;
  }

  button{
    padding: 15px;
    font-size: 16px;
    margin: 15px;
    font-weight: bold;
  }

  .counterOutput{
    font-size: 16px;
    font-weight: bold;
  }
</style>

We can pass this value into our component using a prop.

  <counterProps 
    :by='10'
  />

Now we can use the same component for all our counter needs.

In the next thrilling installment...

We'll continue refactoring this example to allow further flexibility. Introducing Vuex, we will refactor our component to allow us to configure the actions and getters which we want the component to use.

Setting Up Grunt and Tailwind CSS

Chris Finnigan — Sat, 19 Oct 2019 11:31:01 +0000

Tailwind CSS has been getting a lot of love recently at meetups, conferences and from the Web Development Twitterati.

With a site re-skin on the horizon. I was keen to find out if I could use Tailwind CSS to move on from Bootstrap and build my own fully customised UI library.

What is this Tailwind CSS thing you speak of ?

"A utility-first CSS framework for rapidly building custom designs.

Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override."

Check them out at https://www.tailwindcss.com.

Why Grunt?

The site that I'll be re-skinning uses a series of Grunt tasks to compile CSS, JS, Minification etc. It's not the most modern of setups, but it still works great.

I was reading through Tailwind CSS' great documentation. Unfortunately, there didn't seem to be an example for setting up Grunt.

I love a build tool challenge, so with a fresh coffee and a couple of spare hours. I decided to work it out.

The guides provided for Gulp and Webpack etc pointed me in the right direction.

This is what you need to do.

1. Install the following packages

npm install tailwindcss --save-dev

npm install grunt-postcss --save-dev

npm install autoprefixer --save-dev

2. Gruntfile.js configuration

module.exports = function (grunt) {
  grunt.initConfig({
    // get the configuration info from package.json
    pkg: grunt.file.readJSON('package.json'),

    // PostCSS - Tailwindcss and Autoprefixer
    postcss: {
      options: {
        map: true, // inline sourcemaps
        processors: [
          require('tailwindcss')(),
          require('autoprefixer')({ browsers: 'last 2 versions' }) // add vendor prefixes
        ]
      },
      dist: {
        expand: true,
        cwd: 'ui/src/tailwindcss/',
        src: ['**/*.css'],
        dest: 'ui/dist/tailwindcss/',
        ext: '.css'
      }
    },

    // Watch for changes and run Tasks
    watch: {
      postcss: {
        files: 'ui/src/tailwindcss/**/*.css',
        tasks: ['compile-tailwindcss'],
        options: {
          interrupt: true
        }
      }
    }
  })

  // Load Grunt Plugins
  grunt.loadNpmTasks('grunt-contrib-watch')
  grunt.loadNpmTasks('grunt-postcss')

  // Register Tasks
  grunt.registerTask('compile-tailwindcss', ['postcss'])

  // Resgiter Watcher Tasks
  grunt.registerTask('watch-tailwindcss', ['watch:postcss'])
}

3. Create a tailwind.css file in your src directory

Add the following code to your tailwind.css file

@tailwind base;
@tailwind components;
@tailwind utilities;

4. Compile Tailwind CSS

To manually compile your Tailwind CSS files:

    grunt compile-tailwindcss

To compile your Tailwind CSS files on src changes:

   grunt watch-tailwindcss

5. Add the compiled CSS file to your web pages

<link href="/ui/dist/tailwindcss/tailwind.css" rel="stylesheet" type="text/css">

And we're done!

If the development gods were smiling upon you and everything worked as it should. You should now be able to follow the Tailwind CSS documentation and start playing with their great utility functions.

In a very short space of time. I have managed to replicate the entire responsive layout of the site I will be reskinning.

How many lines of custom CSS code have I had to write so far?...Zero!

How many !important overrides have I been forced to write so far?...Zero!

This makes me happy.