Forem: amroessam

How to get your shared Vue components to show IntelliSense in VScode

amroessam — Mon, 10 Jun 2019 06:15:45 +0000

Hello Everyone👋🏽,

I recently created my very first vue component and pushed it to npm.

I wrote about it here and explained how to create something similar here

I made sure it was well documented and was easy to use, however, my colleague pointed out that he would've preferred if he could see intellisense when he uses the component, something that explains what's expected from him when he's using it.

If you've built anything with vue, and use vscode, I'm pretty sure you've used Vetur

Here's a snippet of the functions Vetur provides

Syntax-highlighting

Snippet

Emmet

Linting / Error Checking

Formatting

Auto Completion

Debugging

It also has around 16 million installs, so it's pretty popular.

In a recent iteration, they've added framework support.

So to get intellisense and auto-completion on your vue components, we need to add 2 json files in your project folder, and reference them in package.json to get vetur to show you the intellisens and auto-completion.

So let's get started. I'll be using the package I created earlier for this tutorial

1. Create tags.json

If your package has multiple tags, you can start defining their attributes and their description. For now, we only have one tag, so create a new tags.json file in your project root next to package.json



// tags.json

{
  "simple-alert": {
    "attributes": [
      "message",
      "timeout"
    ],
    "description": "A simple alert"
  }
}

2. Create attributes.json

Now we create the attributes.json file which defines each individual attribute as follows



// attributes.json

{
  "simple-alert/message": {
    "type": "string",
    "description": "A string to replace the default message. Default message: Hello Dev.to"
  },
  "simple-alert/timeout": {
    "type": "number",
    "description": "Number of ms to show the alert. Default timeout: 0 ms"
  }
}

As you can see, we first defined the component tag, then we defined which attributes it supports in the tags.json. Then we define each attribute each tag has, it's expected type, and it's description in the attributes.json file

3. Tell Vetur which files to look for

In package.json we add the following



// package.json

...
"vetur": {
    "tags": "tags.json",
    "attributes": "attributes.json"
  },
...

PS. add the tags.json and attributes.json to the files key in your json file, if you're building the package, so they get included when you push to npm. Like so.



// package.json

...
"files": [
    ...,
    "attributes.json",
    "tags.json"
  ],
...

4. Update git and npm

So now that we've added vetur support, we need to push these updates to npm, so when users install our package they get intellisense and auto-completion



npm version patch

this increments your version patch by 1 and commits the update to git

now we push to github



git push origin

Finally, we republish the package to npm



npm publish

If all works well we should get the below

Now when anyone downloads our package and tries to use it, they'll get intellisense and auto-completion in vscode as follows

I hope you guys enjoyed it, and found it useful.

If you have any questions feel free to shoot them down below😁

Publish Your First NPM Package (Vue) - PART 2

amroessam — Mon, 10 Jun 2019 03:55:35 +0000

Hi Again,

So following up on yesterday's tutorial, in this one, we're going to create a git repo, push our code to it, then login to npm through the cli, then publish our package that we've created in the previous post.

1. Push the code to github

Go to http://github.com
Sign Up or Sign In, then click on the new repository button

Fill in all the details required by github and click create repository

Once that's done, we're gonna push our code to github.

But before we do that, we're going to include the dist folder in our .gitignore so that we don't push our build folder to github.

Open the .gitignore file and the following at the end

...
dist/

Now let's push our code😎

In our terminal we type the following after changing directories to our project folder

git remote add origin https://github.com/amroessam/simplealertcomponent.git
git push -u origin master

Now our code is pushed to our github repository.

2. Upload the package to npm

First thing we need to do is to log in to npm, using our terminal

npm login

Add your log in details

It'll confirm that you're logged in, from here onwards, you'll be able to push to npm from your terminal

Now that we have successfully logged in, let's publish the package.

npm publish

If everything works well, you should get the following message

You can also confirm, by going to the npm package page
https://www.npmjs.com/package/simplealertcomponent

Now the package is ready to use by simply doing an npm install.

3. Celebrate and write a dev.to post about how you published an awesome npm package that everyone can use 😍

Publish Your First NPM Package (Vue) - PART 1

amroessam — Sun, 09 Jun 2019 11:23:42 +0000

Hi Everyone,

It's me again 😊

So Fast forward 4 months from my first post

I've realised my article wasn't the most helpful🤦🏽‍♂️, as I didn't get into details on how I created my first NPM package.

In this post, I'm planning on doing so😁, I'll also try to cover how to get intelliSense working for a vue component in vscode.

For simplicity's sake, we're making a very minimal reusable alert component
We'll be using rollup to build

Let's get started 😎🙌

1. Creating the component

We'll be using vue cli in this tutorial, so if you're unfamiliar with it, a great place to start would be vue's cli documentation

Open your favourite terminal and change directory into your projects directory

cd c:/projects

Now create a new project using vue cli

vue create simplealertcomponent

Select the default preset, wait till vue-cli creates all the necessary boilerplate files for you.

Change directory to the new folder that's made and launch your editor, I'm using vscode so...

cd simplealertcomponent && code .

This is the file structure you should have

.
├───public
│     favicon.ico
│     index.html
└───src
    │ App.vue
    │ main.js
    ├───assets
    │ logo.png
    └───components
      HelloWorld.vue

Delete everything inside the src folder so it's empty, also delete the public folder because we won't be needing it.

Now create entry.js file in the src folder, this will be the entry point to our application.

first we import our component, we'll be creating it later

import component from './SimpleAlert.vue'

Then, we're gonna register it into the vue instance if it exists

function install(Vue) {
  if (install.installed) return
  install.installed = true
  Vue.component('SimpleAlert', component)
}

const plugin = {
  install
}

let GlobalVue = null
if (typeof window !== 'undefined') {
  GlobalVue = window.Vue
} else if (typeof global !== 'undefined') {
  GlobalVue = global.vue
}

if (GlobalVue) {
  GlobalVue.use(plugin)
}

component.install = install

Then export the component as follows

export default component

So the file entry.js finally looks like this after linting and formatting

// ./src/entry.js

import component from "./SimpleAlert.vue";

function install(Vue) {
  if (install.installed) return;
  install.installed = true;
  Vue.component("SimpleAlert", component);
}

const plugin = {
  install
};

let GlobalVue = null;
if (typeof window !== "undefined") {
  GlobalVue = window.Vue;
} else if (typeof global !== "undefined") {
  GlobalVue = global.vue;
}

if (GlobalVue) {
  GlobalVue.use(plugin);
}

component.install = install;

export default component;

Now, let's create the vue component.
Create a new file called SimpleAlert.vue

And add the following code inside it.

// ./src/SimpleAlert.vue

<script>
import { setTimeout } from "timers";
export default {
  name: "SimpleAlert",
  props: {
    message: {
      type: String,
      default: "Hello Dev.to"
    },
    timeout: {
      type: Number,
      default: 0
    }
  },
  mounted() {
    setTimeout(() => {
      alert(this.message);
    }, this.timeout);
  }
};
</script>

Notice how I didn't use a template or a script tag, it's because this component doesn't show any html, it just alerts.

Now create a new folder called build, it should be next to the src folder in the root directory, and add rollup.config.js inside it

So the project structure is as follows

.
│
├───build
│     rollup.config.js
└───src
      entry.js
      SimpleAlert.vue

In rollup.config.js paste the following code

// rollup.config.js

import vue from "rollup-plugin-vue";
import buble from "rollup-plugin-buble";
import commonjs from "rollup-plugin-commonjs";
import replace from "rollup-plugin-replace";
import uglify from "rollup-plugin-uglify-es";
import minimist from "minimist";

const argv = minimist(process.argv.slice(2));

const config = {
  input: "src/entry.js",
  output: {
    name: "SimpleAlert",
    exports: "named"
  },
  plugins: [
    external,
    replace({
      "process.env.NODE_ENV": JSON.stringify("production")
    }),
    commonjs(),
    vue({
      css: true,
      compileTemplate: true,
      template: {
        isProduction: true
      }
    }),
    buble()
  ]
};

// Only minify browser (iife) version
if (argv.format === "iife") {
  config.plugins.push(uglify());
}

export default config;

Now that we have everything in place, let's try to build it, we'll need to edit our package.json to include the build command.

Open your package.json and replace everything you have in there with the following

{
  "name": "simplealertcomponent",
  "version": "0.1.0",
  "main": "dist/simplealertcomponent.umd.js",
  "module": "dist/simplealertcomponent.esm.js",
  "unpkg": "dist/simplealertcomponent.min.js",
  "browser": {
    "./sfc": "src/simplealertcomponent.vue"
  },
  "files": [
    "dist/*",
    "src/*",
    "attributes.json",
    "tags.json"
  ],
  "vetur": {
    "tags": "tags.json",
    "attributes": "attributes.json"
  },
  "scripts": {
    "build": "npm run build:unpkg & npm run build:es & npm run build:umd",
    "build:umd": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format umd --file dist/simplealertcomponent.umd.js",
    "build:es": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format es --file dist/simplealertcomponent.esm.js",
    "build:unpkg": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format iife --file dist/simplealertcomponent.min.js"
  },
  "devDependencies": {
    "cross-env": "^5.2.0",
    "minimist": "^1.2.0",
    "rollup": "^1.14.4",
    "rollup-plugin-buble": "^0.19.6",
    "rollup-plugin-commonjs": "^9.3.4",
    "rollup-plugin-replace": "^2.2.0",
    "rollup-plugin-uglify-es": "0.0.1",
    "rollup-plugin-vue": "^4.7.2",
    "vue": "^2.6.10",
    "vue-template-compiler": "^2.6.10"
  }
}

Now open a terminal and type npm i to install all the dev dependencies.
Once that's done, type npm run build, that will create a new folder called dist with all the files we need to push to NPM in order for other users to consume our component.

This is the end of part 1 🎉🎉, the rest is coming soon 😊

VGauge - Created My First NPM Package (First Post)

amroessam — Thu, 07 Feb 2019 08:50:00 +0000

Hello Everyone,

My 2019 resolution was to get more involved with the open source community, and contribute as much as I can.

I had to create a dashboard for work, and they needed to see gauges, the simplest library I found was GaugeJS

The problem was it was too scattered around to use in my project, so I created a wrapper for it.

I went through the process of creating the package and publishing it.

The process was fairly simple following the NPM docs.

It's such a satisfying feeling to do

npm i vgauge

and it actually works.

Here's the github page, a live demo, and the sandbox if you want to tinker

Please don't hesitate to tell me what you think.

Thank you for reading :)