DEV Community: khaleel gibran

How to create and publish your own Vue component libraries (actually works I swear)

khaleel gibran — Mon, 21 Jul 2025 12:55:42 +0000

This is a lazy (but up to date) tutorial, made while standing on the shoulders of giants, serving as a spiritual successor to these wonderful resources:

With that out of the way, let's get started on this amazing journey that I'm sure you'll enjoy. For context, this tutorial was run on:

Node v22.14.0
Vue v3.5.17
Vite v7.0.4

This is to avoid any discrepancies future versions might cause.

Vite (pronounced "wheat")

We start our day with this magical Vite command:

npm create vite@latest

Running this command will give you a few options. Make sure to choose Vue and TypeScript. Although TypeScript is optional for a Vue package, it's kinda uncool in 2025 not to have typings for your components. People might get irritated and fork your component library just to add types, and then someone will write another DEV tutorial.

Vite will work its magic and create a bunch of files that should look like this:

If your project files don't like this, you should be worried.

Install packages

Very simple, but even the pros forget sometimes.

npm install

Also, install Node typings before your code editor starts screaming:

npm install @types/node --save-dev

Delete some files

Because this is a lazy tutorial, we're going to get rid of some unnecessary files. If you ever need assets or stylesheets, you can always add them back.

Delete these files.

The component

Now, in our src/components/ folder, we're going to add the component that, well, we want to share with the whole world. For this tutorial, I'll create a fancy-looking button that links to this DEV article.

<!-- src/components/CoolButton.vue -->
<script setup lang="ts">
defineProps<{
  text?: string;
}>();
</script>

<template>
  <button class="cool-button">
    <a
      href="https://dev.to/khalby786/how-to-create-and-publish-your-own-vue-component-libraries-actually-works-i-swear-1o5k"
    >
      {{ text }}
    </a>
  </button>
</template>

<style scoped>
/* looks absolutely terrible btw */
.cool-button {
  background-color: #42b983;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}

.cool-button a {
  color: white;
  text-decoration: none;
}

.cool-button:hover {
  background-color: #367c6b;
}
</style>

Exporting the component

Rename the src/main.ts to src/index.ts, and delete all the content in the file. Then expose your component like so:

// src/index.ts
import CoolButton from './components/CoolButton.vue';

export { CoolButton };

Configuring Vite (pronounced "wheat")

To give you a quick summary, Vite lets you build in library mode, which makes it easier to share your amazing component with the whole world on NPM. All that configuration goes in the vite.config.ts file!

// vite.config.ts
import { resolve } from "path";
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

// https://vite.dev/config/
export default defineConfig({
  plugins: [vue()],
  build: {
    lib: {
      entry: resolve(__dirname, "src/index.ts"),
      name: "CoolButton",
      fileName: "vue-cool-button",
    },
    rollupOptions: {
      external: ["vue"],
      output: {
        globals: {
          vue: "Vue",
        },
      },
    },
  },
});

⚠️ If you encounter cannot find path or cannot find __dirname errors, make sure to go back to the Install packages step and install @types/node.

Three's a crowd (tsconfig)

You'll notice we have THREE tsconfig.* files. Because I'm lazy, we're going to merge it all into a single file and call it a day.

Delete tsconfig.app.json and tsconfig.node.json, and paste the following code into tsconfig.json.

tsconfig.json

{
  "compilerOptions": {
    /* Types */
    "declaration": true,
    "declarationDir": "dist/types",
    "emitDeclarationOnly": true,
    "outDir": "dist/types",

    /* General */
    "target": "ES2020",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "node",
    "allowImportingTsExtensions": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
  "exclude": ["node_modules", "dist"]
}

Update package.json

We'll need to make changes in our package.json file so that it points to the right built files. Make sure to add in the following lines:

{
  ...
  "files": [
    "dist"
  ],
  "main": "dist/vue-cool-button.umd.cjs",
  "module": "dist/vue-cool-button.js",
  "types": "dist/types/index.d.ts",
  ...
}

Make sure to also change the build script to the following, so that TypeScript emits type declaration files too.

{
   ...
   "scripts": {
      ...
      "build": "vite build && vue-tsc --emitDeclarationOnly",
      ...
   }
   ...
}

Build

npm run build

This will generate your built files in dist/. It'll include JS files for both UMD and ESM, and any CSS files used.

Testing

A lazy way to taste is to start a fresh Vue project in a different folder. Run npm link in your library's folder, and run npm link vue-cool-button in the test app folder so that the library will be usable in your test app.

Somewhere in your test app, import your component:

<script setup>
import { CoolButton } from 'vue-cool-button';
import 'vue-cool-button/vue-cool-button.css';
</script>

<template>
  <CoolButton text="hello world" />
</template>

Publishing to NPM

# sign into npm
npm adduser

# publish
npm publish

That's it.

Conclusion

Some core Vue contributor is probably reading this tutorial, writhing in pain at the war crimes we’ve committed along the way. This might not be the most proper way to create and publish a Vue component library, but it’s fast and, most importantly, it works. It’s a lazy tutorial, after all.

I wrote this after making vue-utterances, documenting the problems I faced along the way. I hope this tutorial helps out anyone who's on a similar journey!

My Favourite Web Development Tools!

khaleel gibran — Wed, 05 Aug 2020 12:03:14 +0000

Every web developer has his or her favourite tools that he or she uses to make coding easier and "enjoyable". In this post, I'm going to share some awesome web development tools that I find really awesome! (although most of them are CSS designing tools 😳🙄)

1. Glitch

https://glitch.com

Ok, this not just a tool, this a really nice coding platform with an awesome community. I can host my projects with the help of an inbuilt code editor. Supports many languages but works best for NodeJS.

2. Smooth Shadows (by Phillip Brumm)

https://brumm.af/shadows

Smooth shadows help in generating CSS code that will result in smooth box shadows. It looks really smooth and satisfying. 😅

3. Coolors

https://coolors.co

A really nice online tool that can generate matching and suitable color schemes for your project. If you don't like the current color scheme, hit the Spacebar and it will generate a new color scheme for you.

4. Blobmaker

https://www.blobmaker.app

Blobmaker helps you to generate really gooey looking SVG blobs of various sizes, colors and shapes randomly. Can be used as background or to create really cool looking animating blobs!

5. Get Waves

https://getwaves.io

Similar to Blobmaker, Get Waves allows you to generate waves (the ocean ones) of different colors and varying number of waves randomly. It looks good as a footer of a webpage or the header.

6. Undraw.co

https://undraw.co

An awesome collection of SVG illustrations for open source projects, can be used for landing pages, 404 pages, etc, and in general as well! The illustrations can be used without attribution and without paying any money, although I feel like you should give some sort of attribution.

7. Marcdown

https://liyasthomas.github.io/marcdown

A beautiful and real-time Markdown to HTML editor (by Liyas Thomas) online that can help you preview your Markdown code before publishing it on GitHub. It has a really beautiful dark mode 👻😏🤩. Works offline after first use, which makes it even more awesome.

8. Postwoman (not Postman)

https://postwoman.io

Another beautiful tool built by Liyas Thomas. Postwoman is an API request builder that allows you to test out [your] APIs with or without a proxy. It's a Progressive Web App so it can be saved to your desktop! It's lightweight so basically it's a really nice online alternative to Postman.

9. Screely.com

https://screely.com

This helps you to create awesome and beautiful (I really like awesome and beautiful stuff) mockups of screenshots of websites. Can be really useful if you're not a MacBook user and you need a nice picture of your website for your README!

10. CSS Grid Generator

https://cssgrid-generator.netlify.com/

This is another awesome 😂 website by Sarah Drasner which generates code to create dynamic grid layouts using CSS Grids.

And those are the top 10 awesome tools that I use, let me know what are the cool stuff that you use in the comments! ✌️

Create a custom 404 page for your Vue 2 app

khaleel gibran — Sun, 02 Aug 2020 11:01:42 +0000

In this tutorial, you'll learn how to add a custom 404 page to a Vue app (generated using the Vue CLI) with a basic Vue router configuration.

For this tutorial, I will be using a Vue router starter app generated using the Vue CLI. Here's how the project file tree might look:

Right now, all we need to focus on are src/router/index.js and the components of the src/views folder.

This is how src/router/index.js should somewhat look:



import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';

Vue.use(VueRouter)

  const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

const router = new VueRouter({
  routes
})

export default router

1) Visit the home page of the Vue app. /

What do you see?

2) Visit the about page of the Vue app. /about

What do you see?

3) Visit a random url of the app. Like /hi/someurl/404

What do you see?

(I customised my Vue app a lot, so it looks a whole lot different from the starter Vue router app, kindly excuse me for that 😅)

What do we notice from the above 3 scenarios?

If we visit a URL that exists, it correctly renders the component associated with that route. But if the URL does not exist, it just redirects it to the homepage, instead of showing some sort of error or a default 404 page. You might also have noticed that the URL of the default Vue app has /#/ suffixed to the URL.

We can fix all of these issues.

For the redirecting-to-homepage-when-it-doesn't-exist case, we can create a custom 404 page, by specifying a wildcard route after all the other routes. First, we will have to create a 404 component.

In src/views folder, create a file named NotFound.vue. Add some basic text and images that makes it look like a 404 page.



<template>
  <center>
    <h1>Not Found!</h1>
    <p>
      <a href="/">Go home?</a>
    </p>
  </center>
</template>

<script>

  export default {
    name: 'NotFound'
  }

</script>

<style scoped>

  center {
    margin: 15vw;
  }

  h1 {
    color: var(--border);
    font-size: 2em;
  }

</style>

Once you have created NotFound.vue, in src/router/index.js add a wildcard route pointing towards the NotFound.vue component.



import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';
import NotFound from '../views/NotFound.vue';

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  },
  {
    path: '*',
    name: 'Not Found',
    component: NotFound
  }
]

const router = new VueRouter({
  routes
})

export default router

But we need to do one more thing, only then can we "successfully" create a 404 page.

The weird URL.

The "weird" URL is because the Vue router uses hash mode for routing by default. It uses the URL hash to simulate a full URL so that the page won't be reloaded when the URL changes.

We can prevent the Vue router from doing this by enabling History mode.



const router = new VueRouter({
  mode: 'history',
  routes
});

The final src/router/index.js:



import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';
import NotFound from '../views/NotFound.vue';

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  },
  {
    path: '*',
    name: 'Not Found',
    component: NotFound
  }
]

const router = new VueRouter({
  mode: 'history',
  routes
})

export default router

And now, our URL looks normal!

And that's it! We have a fully functional 404 page now! Hope you enjoyed this tutorial!

REHeader - GitHub Profile README Header Image Generator

khaleel gibran — Sun, 19 Jul 2020 14:11:46 +0000

Project URL: https://reheader.glitch.me
Star it on GitHub: https://github.com/khalby786/reheader/

REHeader

Generate beautiful header images for your GitHub profile READMEs.

GitHub now allows us to add READMEs to our profile describing ourselves but what if we need a header image in the README with your name and a small greeting? This generator comes to your rescue and saves the day (well, not a big thing and not very useful and it doesn't really save the day 🤷)

Once you generate the image and upload it somewhere (like a CDN), you can use it in your README like this:

Instructions for use

Go to https://reheader.glitch.me, scroll all the way down and log in with GitHub.
Once you login with GitHub, you'll be redirected to a page where you are able to customise your own header image.
Then, click on Generate Image and the generated image will appear. Below the image, you'll see a yellow-coloured box 😅 that says 'Add to username/username'. For this to work, you will have to create a repo and give it the name of your username. (Like khalby786/khalby786).
Click on 'Add to username/username'. Then navigate towards your profile README repo and you will see a new file created with the name of header.png.
Now to use it in your README! You could use /header.png in the README file (with Markdown) and it will work just fine in the preview of the README in the repo page but when you navigate back to your user page at https://github.com/username, you'll see a weird image which does not look anything like the header you have designed.

It turns out to be some other image under the same file name and route.

To solve this, navigate to the header.png file in the repo that you've stored it. Then, right click on the image and copy its URL. Then go back to your README and add in the URL you just copied as the source of the header image.

At least you don't need to worry about hosting now!

Note that username is your GitHub username.

This is literally something I created in 1 day with Vue, so you're sure to find a lot of bugs and bad code (and code practises), make sure to report them here. I also aim to make the code better and also more readable.

New features are being added whenever I can, make sure to check 'em out.

Jsoning - A simple key-value JSON-based persistent lightweight database.✨

khaleel gibran — Wed, 27 May 2020 05:08:59 +0000

✨ A simple key-value JSON-based lightweight database. ✨

Jsoning is a simplified wrapper for Node.js that lets you write and read data to and from JSON files. It's designed to be beginner-friendly and easy to use, with a simple API that makes it easy to get started with. It's perfect for small projects, prototyping, and learning how to work with databases.

Features

Use existing JSON files to read and write key-value pairs
EventEmitters to listen to changes in the database
Atomic file writing to prevent data corruption
Easier to use than a toaster
TypeScript support for all the fixed-type addicts out there

Install

Node.js v16.x or greater is required for this package to work.

npm i jsoning

# pnpm if you're feeling fast
pnpm i jsoning

# yarn if you're feeling fancy
yarn add jsoning

View the full documentation here.

Basic Usage

import { Jsoning, MathOps } from 'jsoning';
const db = new Jsoning('database.json');

// Set some values with a key
await db.set('birthday', '07-aug');
await db.set('age', '13');

// Push stuff to an array for a particular key
await db.push('transformers', 'optimus prime');
await db.push('transformers', 'bumblebee');
await db.push('transformers', 'iron hide');

// Get the value of a key
console.log(await db.get('transformers')); // [ 'optimus prime', 'bumblebee', 'iron hide' ]

// Get all the values
console.log(await db.all()); // { Record<string, JSONValue> of the whole database contents }

// does such a value exist?
console.log(await db.has('value2')); // false

// My age keeps changing, so I'm deleting it
console.log(await db.delete('age')); // true

// I got $100 for my birthday
await db.set('money', 100);

// and someone gave me $200 more
await db.math('money', MathOps.Add, 200);

// Just wanna make sure how much money I got
console.log(await db.get<number>('money')); // 300

// RIP iron hide, he died
await db.remove('transformers', 'iron hide');

// I'm getting bored, so I'm clearing the whole database
await db.clear();

Creating a Markdown Blog with EJS & Express

khaleel gibran — Fri, 08 May 2020 14:05:11 +0000

I have a lot of blogs. Yep, and the thing is I like all of 'em. And each one uses a framework like Gatsby or a templating engine like Nunjucks. But it is cool to have your blog within your website. Now, my website is built using Express and Express alone. I don't use any templating engines, it's just Express routes with HTML files. Having a blog within your website (all-in-one-pack) is so awesome. In this post, I'll be showing you how to create your own Markdown blog using EJS and Express!

mkdir blog
touch index.ejs
touch blog.ejs

Then, in your main Node.js script file (mine is server.js, most people have their main script at index.js), we need to configure the markdown parser, EJS and the blog directory. For that, we'll need to install a few packages.

npm i express ejs markdown-it gray-matter body-parser

express, the Node.js framework we're gonna be using
ejs, Embedded JavaScript, gonna make the blog post part easier
markdown-it is the markdown parser that I'm gonna be using.
gray-matter is a package that is gonna help me read the .md files better for extra stuff (thanks to Kumar Abhirup for introducing me to this!)

Once we've done that, we need to require all our dependencies in server.js (or index.js or whatever). We'll also be using the path module, but we don't need to install it because it is an in-built module.

// body parser
const express = require('express');
const app = express();

// if you have a public dir with static scripts and styles
app.use(express.static('public'));

var bodyParser = require("body-parser");
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

// path for the ejs folder
const path = require("path");

app.set("views", path.join(__dirname, "blog"));
app.set("view engine", "ejs");

// gray-matter to read the .md files better
const matter = require('gray-matter');

Then, we need to define our GET routes for the blog posts.

app.get("/blog/:article", (req, res) => {

  // read the markdown file
  const file = matter.read(__dirname + '/blog/' + req.params.article + '.md');

  // use markdown-it to convert content to HTML
  var md = require("markdown-it")();
  let content = file.content;
  var result = md.render(content);

  res.render("index", {
    post: result,
    title: file.data.title,
    description: file.data.description,
    image: file.data.image
  });
});

What is happening here is that whenever a user visits /blog/article, the fs module looks in the blog directory for a .md file named article. (The URL of the blog post is taken from the file name minus the .md part). And the blog post markdown file should be located in the blog directory we made at first.

Now, for this to work properly, every blog post markdown file should be in the following format:

---
title: "Title Here"
description: "A nice description of this post"
image: A nice image representing the blog post, mainly meant for the <meta> tags
---

Blog post content here
...

The format is the reason why I used the gray-matter package. And markdown-it converts the Markdown stuff to HTML.

Also, we need a GET route to show all our blog posts (blog.ejs).

app.get("/blog", (req, res) => {
  const posts = fs.readdirSync(__dirname + '/blog').filter(file => file.endsWith('.md'));
  res.render("blog", {
    posts: posts
  });
});

And finally, for our EJS files.
index.ejs

<html>
  <body>
    <div id="blog">
      <h1><%= title %></h1>
      <p><%= description %></p>
      <%- post %>
    </div>
  </body>
</html>

NOTE: An EJS variable named image (<%= image %>) is also available which is the image url mentioned in the blog post markdown file header.

blog.ejs

<html>
  <body>
    <div id="blog">
      <% for (post of posts) { %>
        <a href="/blog/<%= post.slice(0, -3) %>">
          <div class="post">
            <%= post.toUpperCase() %>  
          </div>
        </a>
      <% } %>
    </div>
  </body>
</html>

And that's it!

Of course, this is just a basic template for you to use, you can always add more HTML and style using CSS to customize according to your needs!

For a demo, you can see my blog at https://khaleelgibran.com/blog.
Code hosted on Glitch:

Any questions, tweet me on Twitter or send me an email at khalby786@gmail.com.

Or just ask me in the comments below.