DEV Community: BENSIMON Raphaël

How to add generic style in Vue Styleguidist

BENSIMON Raphaël — Tue, 29 Nov 2022 10:45:03 +0000

If you want import style into vue styleguidist build like you import global style in App.vue just edit your styleguid.config.js :

// styleguid.config.js 
const path = require('path')
module.exports = {
    require        : [
        path.join(__dirname, 'src/assets/styles/global.css')
    ]
}

How create and use github package with VueJS

BENSIMON Raphaël — Tue, 29 Nov 2022 10:42:27 +0000

1. Setup package.json

Add the name of your organization or your github account to your package name

"name": "@myUsername/myPackage"

Define where you're file will be build

"files": [
    "dist/*"
],

Define the repository of your package

"repository": {
    "url": "https://github.com/myUsername/myPackage"
},

Define publishConfig

"publishConfig": {
  "registry":"https://npm.pkg.github.com/@myUsername"
},

Update your version in package.json

"version": "1.4.5" to "version": "1.4.6"

If you want to create a VueJS package, it's recommend to follow this step to build your package :

Add this command in scripts (in package.json) to build your package.

"build-library": "vue-cli-service build --target lib --name @myUsername/mycomponent ./install.js",

Create install.js file into root folder

import myComponent from 'src/components/myComponent.vue
export default {
    install(Vue) {
        Vue.component('MyComponent', myComponent)
    }
}

Then build with this command :

npm run build-library

2. Github action

Push your code to your repo and then go yo your github repository > Action > set up a workflow yourself

Then paste this code in editor field

name: myPackage

on:
  push:
    branches:
      - main

jobs:
  publish-gpr:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v1
        with:
          node-version: 12
          registry-url: https://npm.pkg.github.com/
          scope: '@myUsername'
      - run: npm install
      - run: npm publish
        env:
          NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}}

You need to replace scope value with your organization or profile name

This script will will automate the creation/update of your package in github when a commit is pushed on the main branch

Once done, click Start commit, then Commit new file

3. Generate token access

Click on your github profile and go to settings

Then scroll to Developer settings and click on it

Go to Token (classic)

Click on Generate new token (classic)

Fill Note
Set No expiration
Allow read:packages

Click on Generate token (at bottom)

Copy your token now because you won't be able to see it again !

4. Install your package

Now go to your project and create .npmrc file in root folder, then paste this and replace with your username and your token

@YOUR_USERNAME:registry=https://npm.pkg.github.com/
//npm.pkg.github.com/:_authToken=YOUR_TOKEN

Now you can install the package just like you would any other NPM package.

npm install @myUsername/myPackage

If you want to install a VueJS package into a VueJS project follow this step :

Import your component into your Vue project
main.js (Vue 3)

import { createApp } from 'vue'
import App from './App.vue'
import myComponent from '@myUsername/myComponent/'

const app = createApp(App)
app.use(myComponent)

app.mount('#app')

main.js (Vue 2)

import Vue from 'vue'
import App from './App.vue'
import myComponent from '@myUsername/myComponent/'

Vue.use(components)

new Vue({
    render : function (h) {
        return h(App)
    }
}).$mount('#app')

Create Signature Pad Component in Vue

BENSIMON Raphaël — Tue, 14 Sep 2021 14:10:47 +0000

Hello, today we will see how to create a signature pad component using vuejs.

Creating your own components is very useful when you have specific needs, it also allows you to learn the logic behind the component.

Use canvas

We are going to use a canvas HTML tag, this will allow the user to draw his signature.

<template>
    <canvas />
</template>

Add some style :

<style scoped>
canvas {
    border: 1px solid black;
    background-color: white;
    cursor: crosshair;
}
</style>

Note:

Here we use the scoped property on the style tag which allows to keep the style inside the component.
I define the cursor by a crosshair (the details make the differences).

It's time to use javascript !

First of all we will get our canvas and pass it some parameters

data() {
    return {
        ctx :  null,
    }
},
mounted(){
    this.ctx  = this.$el.getContext('2d')
    this.ctx.strokeStyle  =  'black'
    this.ctx.lineWidth  =  2
}

Notes:

strokeStyle is the color of the signature
lineWidth is the width of the signature

Let's add the mousedown event to our canvas which will let us know when the user clicks on our canvas.

<template>
    <canvas @mousedown=”onMouseDown” />
</template>

data(){
    return {
        ...
        sign  : false,
        prevX : null,
        prevY : null
    }
}
methods: {
    onMouseDown($event){
        this.sign = true
        this.prevX = $event.offsetX
        this.prevY = $event.offsetY
    }
}
...

The sign property allows to know if the user has clicked on the canvas.
The prevX and prevY properties allow to know the current position of the cursor by retrieving it from $event.

We shift into second gear !

We will add the mousemove event to our canvas :

<template>
    <canvas ... @mousemove="onMouseMove" />
</template>

methods: {
    ...
    mousemove($event) {
        if(this.sign) {
            const  currX  = $event.offsetX
            const  currY  = $event.offsetY
        }
    },
}

Here we get the current position of the pointer which will allow us to draw the signature thanks to the previous position we got in the @onmousedown event.

Draw the signature

methods: {
    ...
    mousemove($event) {
        if(this.sign) {
            const  currX  = $event.offsetX
            const  currY  = $event.offsetY
            this.draw(this.prevX, this.prevY, currX, currY)
            this.prevX  =  currX
            this.prevY  =  currY
        }
    },
    draw(depX, depY, destX, destY){
        this.ctx.beginPath()
        this.ctx.moveTo(depX, depY)
        this.ctx.lineTo(destX, destY)
        this.ctx.closePath()
        this.ctx.stroke()
    }
}

Remarks:

beginPath() allows to start a path
moveTo() allows to initialize the starting point
lineTo() allows to describe the arrival point
closePath() closes the path
stroke() allows to apply the path to the canvas

Now we will prevent the user from drawing on the canvas if :

His cursor is outside the canvas
His cursor is not clicking anymore

<template>
    <canvas ... @mouseup="sign = false" @mouseout="sign = false" />
</template>

Get the v-model and store the canvas.

Let's define the emit update and the modelValue props

emits : ['update:modelValue'],
props : {
    modelValue : {
        type :  null,
        required :  true
    }
},

Let's transform our canvas drawing into an image and update the v-model in our draw method:

methods: {
    ...
    draw(depX, depY, destX, destY) {
        this.ctx.beginPath()
        this.ctx.moveTo(depX, depY)
        this.ctx.lineTo(destX, destY)
        this.ctx.closePath()
        this.ctx.stroke()

        const img = this.$el.toDataURL('image/png').replace('image/png',        'image/octet-stream')
        this.$emit('update:modelValue', img)
    }
}

Last step !

Now we have to check if the v-model of our component is empty in order to remove our canvas drawing

watch : {
    modelValue(model) {
        if(!model) {
            this.ctx.clearRect(0, 0, this.$el.width, this.$el.height)
        }
    }
}

That's it!

To use our component in a parent view here is how to do it:

<template>
    <MyCanvasComponent v-model="canvas" />
    <button @click="canvas = null">Delete your signature</button>
</template>

import MyCanvasComponent from '@/components/MyCanvasComponents.vue
export default {
    components : {
        MyCanvasComponent
    },
    data(){
        return {
            canvas : null
        }
    }
}

The entire component code :

<template>
    <canvas @mousedown="mousedown" @mousemove="mousemove" @mouseup="sign = false" @mouseout="sign = false" />
</template>

export  default {
    emits : ['update:modelValue'],
    props : {
        modelValue : {
            type :  null,
            required :  true
        }
    },
    data() {
        return {
            ctx :  null,
            sign :  false,
            prevX :  0,
            prevY :  0,
        }
    },
    methods : {
        mousedown($event) {
            this.sign  =  true
            this.prevX  = $event.offsetX
            this.prevY  = $event.offsetY
        },
        mousemove($event) {
            if(this.sign) {
                const  currX  = $event.offsetX
                const  currY  = $event.offsetY
                this.draw(this.prevX, this.prevY, currX, currY)
                this.prevX  =  currX
                this.prevY  =  currY
            }
        },
        draw(depX, depY, destX, destY) {
            this.ctx.beginPath()
            this.ctx.moveTo(depX, depY)
            this.ctx.lineTo(destX, destY)
            this.ctx.closePath()
            this.ctx.stroke()

            const img = this.$el.toDataURL('image/png').replace('image/png', 'image/octet-stream')
            this.$emit('update:modelValue', img)
        },
    },
    watch : {
        modelValue(model) {
            if(!model) {
            this.ctx.clearRect(0, 0, this.$el.width, this.$el.height)
            }
        }
    },
    mounted() {
        this.ctx  = this.$el.getContext('2d')
        this.ctx.strokeStyle  =  'black'
        this.ctx.lineWidth  =  2
    }
}

<style scoped>
canvas {
    border: 1px solid black;
    background-color: white;
    cursor: crosshair;
}
</style>