DEV Community: Jingtian Zhang

Pinia to replace VueX as Vue Store

Jingtian Zhang — Fri, 15 Apr 2022 14:11:05 +0000

Pro

supports both vue2 and 3
abandon Mutation, only state, getter and action, simplify state management
no more nested structure, fits composition api style better
supports TypeScript
better code splitting

Basic Usage

here lets create a project using vite:

npm init vite@latest

install pinia

npm i pinia

the entry main.ts file would be:

and then you can create a store

and use it

when you need to use multiple properties from store, to make it easier, we can destrcuture them using Pinia's storeToRefs

Pinia State Management

simple data modification can be done using store.propertyName directly

if the modification involves much data, we can use $patch, as instructed in its doc, it will improve speed of modification

$patch accepts two args:

$patch + object
$patch + function

you can also make change via action

add chagneState method in store.actions

call store.methodName directly

Getters inside Pinia

the getter inside pinia is almost the same to the one in vue

getter‘s value can be cached, so even if no value change, it will only be called once for multiple calls

add getter method

use it inside component

inside getter we can also use this to modify data

call one store in another

let's create a new store file called substore.ts

and use it in index.ts

Conclusion

well, it is the default recommended by Vue team to replace Vuex, and you can use it in production already.

Build a social sharing component in Vue3

Jingtian Zhang — Fri, 01 Apr 2022 13:44:19 +0000

We are trying to migrate the entire project to Vue3, so there were lots of rewrite, including basic components, from button to message, dialog, etc, and all the business logic and related components.

One component we need to rewrite was vue-social-sharing, which is really easy to use in Vue2.

Dissecting the source code

when we dig into what inside source code of vue-social-sharing, we can find three source files :

vue-social-sharing.js
network.js
share-network.js

well, the first one vue-social-sharing.js is the entry file where it instructs how to mount the component in the correct way:

well, this is easy to write to Vue3, and we can also find a example here:

just a simple Vue.use(), easy to understand, lets check other files

in network.js, it just exports bunch of social media links:

we can keep that, no need to change anything

now the remaining issue is share-network.js:



import AvailableNetworks from './networks'

let $window = typeof window !== 'undefined' ? window : null

export function mockWindow (self) {
  $window = self || window // mock window for unit testing
}

export default {
  name: 'ShareNetwork',

  props: {
    /**
     * Name of the network to display.
     */
    network: {
      type: String,
      required: true
    },

    /**
     * URL of the content to share.
     */
    url: {
      type: String,
      required: true
    },

    /**
     * Title of the content to share.
     */
    title: {
      type: String,
      required: true
    },

    /**
     * Description of the content to share.
     */
    description: {
      type: String,
      default: ''
    },

    /**
     * Quote content, used for Facebook.
     */
    quote: {
      type: String,
      default: ''
    },

    /**
     * Hashtags, used for Twitter and Facebook.
     */
    hashtags: {
      type: String,
      default: ''
    },

    /**
     * Twitter user, used for Twitter
     * @var string
     */
    twitterUser: {
      type: String,
      default: ''
    },

    /**
     * Media to share, used for Pinterest
     */
    media: {
      type: String,
      default: ''
    },

    /**
     * HTML tag used by the Network component.
     */
    tag: {
      type: String,
      default: 'a'
    },

    /**
     * Properties to configure the popup window.
     */
    popup: {
      type: Object,
      default: () => ({
        width: 626,
        height: 436
      })
    }
  },

  data () {
    return {
      popupTop: 0,
      popupLeft: 0,
      popupWindow: undefined,
      popupInterval: null
    }
  },

  computed: {
    /**
     * List of available networks
     */
    networks () {
      return this.$SocialSharing
        ? this.$SocialSharing.options.networks
        : AvailableNetworks
    },

    /**
     * Formatted network name.
     */
    key () {
      return this.network.toLowerCase()
    },

    /**
     * Network sharing raw sharing link.
     */
    rawLink () {
      const ua = navigator.userAgent.toLowerCase()

      /**
       * On IOS, SMS sharing link need a special formatting
       * Source: https://weblog.west-wind.com/posts/2013/Oct/09/Prefilling-an-SMS-on-Mobile-Devices-with-the-sms-Uri-Scheme#Body-only
       */
      if (this.key === 'sms' && (ua.indexOf('iphone') > -1 || ua.indexOf('ipad') > -1)) {
        return this.networks[this.key].replace(':?', ':&')
      }

      return this.networks[this.key]
    },

    /**
     * Create the url for sharing.
     */
    shareLink () {
      let link = this.rawLink

      /**
       * Twitter sharing shouldn't include empty parameter
       * Source: https://github.com/nicolasbeauvais/vue-social-sharing/issues/143
       */
      if (this.key === 'twitter') {
        if (!this.hashtags.length) link = link.replace('&hashtags=@h', '')
        if (!this.twitterUser.length) link = link.replace('@tu', '')
      }

      return link
        .replace(/@tu/g, '&via=' + encodeURIComponent(this.twitterUser))
        .replace(/@u/g, encodeURIComponent(this.url))
        .replace(/@t/g, encodeURIComponent(this.title))
        .replace(/@d/g, encodeURIComponent(this.description))
        .replace(/@q/g, encodeURIComponent(this.quote))
        .replace(/@h/g, this.encodedHashtags)
        .replace(/@m/g, encodeURIComponent(this.media))
    },

    /**
     * Encoded hashtags for the current social network.
     */
    encodedHashtags () {
      if (this.key === 'facebook' && this.hashtags.length) {
        return '%23' + this.hashtags.split(',')[0]
      }

      return this.hashtags
    }
  },

  render: function (createElement) {
    if (!this.networks.hasOwnProperty(this.key)) {
      throw new Error('Network ' + this.key + ' does not exist')
    }

    const node = {
      class: 'share-network-' + this.key,
      on: {
        click: () => this[this.rawLink.substring(0, 4) === 'http' ? 'share' : 'touch']()
      }
    }

    if (this.tag === 'a') node.attrs = { href: 'javascript:void(0)' }

    return createElement(this.tag, node, this.$slots.default)
  },

  methods: {
    /**
     * Center the popup on multi-screens
     * http://stackoverflow.com/questions/4068373/center-a-popup-window-on-screen/32261263
     */
    resizePopup () {
      const width = $window.innerWidth || (document.documentElement.clientWidth || $window.screenX)
      const height = $window.innerHeight || (document.documentElement.clientHeight || $window.screenY)
      const systemZoom = width / $window.screen.availWidth

      this.popupLeft = (width - this.popup.width) / 2 / systemZoom + ($window.screenLeft !== undefined ? $window.screenLeft : $window.screenX)
      this.popupTop = (height - this.popup.height) / 2 / systemZoom + ($window.screenTop !== undefined ? $window.screenTop : $window.screenY)
    },

    /**
     * Shares URL in specified network.
     */
    share () {
      this.resizePopup()

      // If a popup window already exist, we close it and trigger a change event.
      if (this.popupWindow && this.popupInterval) {
        clearInterval(this.popupInterval)

        // Force close (for Facebook)
        this.popupWindow.close()

        this.emit('change')
      }

      this.popupWindow = $window.open(
        this.shareLink,
        'sharer-' + this.key,
        ',height=' + this.popup.height +
        ',width=' + this.popup.width +
        ',left=' + this.popupLeft +
        ',top=' + this.popupTop +
        ',screenX=' + this.popupLeft +
        ',screenY=' + this.popupTop
      )

      // If popup are prevented (AdBlocker, Mobile App context..), popup.window stays undefined and we can't display it
      if (!this.popupWindow) return

      this.popupWindow.focus()

      // Create an interval to detect popup closing event
      this.popupInterval = setInterval(() => {
        if (!this.popupWindow || this.popupWindow.closed) {
          clearInterval(this.popupInterval)

          this.popupWindow = null

          this.emit('close')
        }
      }, 500)

      this.emit('open')
    },

    /**
     * Touches network and emits click event.
     */
    touch () {
      window.open(this.shareLink, '_blank')

      this.emit('open')
    },

    emit (name) {
      this.$root.$emit('share_network_' + name, this.key, this.url)
      this.$emit(name, this.key, this.url)
    }
  }
}

when we are wondering what is inside this, lets just print it out

here it shows it is a VueComponent instance, we can rewrite methods, computed property and most of others to Vue3 style first, and in the end, let's take a look of the render function

Rewrite

methods

to function or arrow functions

variables

use ref or reactive to define

props

use defineProps to define props
to destructure props, use toRefs or toRef

emits

use defineEmits to define emit

computed

use computed(() => xxx) to define computed properties

watch

use watch(() => props.xxx, (newVal, oldVal) => xxxxxx) to watch for certain property
watchEffect is another thing we can use

Render Function

First, let's read through render function topic in both Vue2 and Vue3 doc:

here we can see that in Vue2 the render function has a default template:

in Vue2:

createElement is actually a function, can print it out and take a look
render function eventually returns createElement
createElement can pass 3 args
- 1st one required, String/Object/Function
- 2nd optional, Object
- 3rd optional, String/Array

in Vue3, there are major changes, actually, I think the doc explains very clearly about changes, so I will just proceed to the following part.

Rewrite Render Logic in Vue3

now let's write our share-network.js here:



import AvailableNetworks from './network';
import {
    ref,
    computed,
    h,
    onMounted,
    reactive,
    toRefs,
    getCurrentInstance
} from 'vue';
let $window = typeof window !== 'undefined' ? window : null;

export default {
    name: 'DPSharing',
    props: {
        network: {
            type: String,
            required: true
        },
        url: {
            type: String,
            required: true
        },
        title: {
            type: String,
            required: true
        },
        description: {
            type: String,
            default: ''
        },
        quote: {
            type: String,
            default: ''
        },
        hashtags: {
            type: String,
            default: ''
        },
        twitterUser: {
            type: String,
            default: ''
        },
        media: {
            type: String,
            default: ''
        },
        tag: {
            type: String,
            default: 'a'
        },
        popup: {
            type: Object,
            default: () => ({
                width: 626,
                height: 436
            })
        }
    },
    emits: ['change', 'close', 'open'],
    setup(props, context) {
        const { slots, emit } = context;
        const popupTop = ref(0);
        const popupLeft = ref(0);
        const popupWindow = ref(undefined);
        const popupInterval = ref(null);

        const {
            network,
            url,
            title,
            description,
            quote,
            hashtags,
            twitterUser,
            media,
            tag,
            popup
        } = toRefs(props);

        const networks = computed(() => {
            return AvailableNetworks;
        });

        const key = computed(() => {
            return network.value.toLowerCase();
        });

        const rawLink = computed(() => {
            const ua = navigator.userAgent.toLowerCase();
            if (
                key.value === 'sms' &&
                (ua.indexOf('iphone') > -1 || ua.indexOf('ipad') > -1)
            ) {
                return networks.value[key.value].replace(':?', ':&');
            }
            return networks.value[key.value];
        });

        const shareLink = computed(() => {
            console.log('check sharelink');
            let link = rawLink.value;

            if (key.value === 'twitter') {
                if (!hashtags.value.length) link = link.replace('&hashtags=@h', '');
                if (!twitterUser.value.length) link = link.replace('@tu', '');
            }

            return link
                .replace(/@tu/g, '&via=' + encodeURIComponent(twitterUser.value))
                .replace(/@u/g, encodeURIComponent(url.value))
                .replace(/@t/g, encodeURIComponent(title.value))
                .replace(/@d/g, encodeURIComponent(description.value))
                .replace(/@q/g, encodeURIComponent(quote.value))
                .replace(/@h/g, encodedHashtags.value)
                .replace(/@m/g, encodeURIComponent(media));
        });

        const encodedHashtags = computed(() => {
            console.log('check encodedHashtags');
            if (key === 'facebook' && hashtags.value.length) {
                return '%23' + hashtags.value.split(',')[0];
            }

            return hashtags.value;
        });

        const resizePopup = () => {
            console.log('resize popup method triggered here ');

            const width =
                $window.innerWidth ||
                document.documentElement.clientWidth ||
                $window.screenX;
            const height =
                $window.innerHeight ||
                document.documentElement.clientHeight ||
                $window.screenY;
            const systemZoom = width / $window.screen.availWidth;

            popupLeft.value =
                (width - popup.width) / 2 / systemZoom +
                ($window.screenLeft !== undefined
                    ? $window.screenLeft
                    : $window.screenX);
            popupTop.value =
                (height - popup.height) / 2 / systemZoom +
                ($window.screenTop !== undefined ? $window.screenTop : $window.screenY);
        };

        const share = () => {
            // debugger;
            resizePopup();

            // If a popup window already exist, we close it and trigger a change event.
            if (popupWindow.value) {
                clearInterval(popupInterval.value);

                // Force close (for Facebook)
                popupWindow.value.close();
                emit('change');
            }

            popupWindow.value = $window.open(
                shareLink.value,
                'sharer-' + key.value,
                ',height=' +
                    popup.value.height +
                    ',width=' +
                    popup.value.width +
                    ',left=' +
                    popupLeft.value +
                    ',top=' +
                    popupTop.value +
                    ',screenX=' +
                    popupLeft.value +
                    ',screenY=' +
                    popupTop.value
            );

            // If popup are prevented (AdBlocker, Mobile App context..), popup.window stays undefined and we can't display it
            if (!popupWindow.value) return;

            popupWindow.value.focus();

            // Create an interval to detect popup closing event
            popupInterval.value = setInterval(() => {
                if (!popupWindow.value || popupWindow.value.closed) {
                    clearInterval(popupInterval.value);

                    popupWindow.value = null;

                    emit('close');
                }
            }, 500);

            emit('open');
        };

        const touch = () => {
            console.log('touch method triggered');
            window.open(shareLink.value, '_blank');
            emit('open');
        };

        const renderData = () => {
            if (!networks.value.hasOwnProperty(key.value)) {
                throw new Error('Network ' + key.value + ' does not exist');
            }

            const node = {
                class: 'share-network-' + key.value,
                on: {
                    click: rawLink.value.substring(0, 4) === 'http' ? share : touch
                },
                attrs: {
                    href:
                        rawLink.value.substring(0, 4) === 'http'
                            ? shareLink.value
                            : rawLink.value
                }
            };

            if (tag.value === 'a') {
                node.attrs = { href: 'javascript:void(0)' };
            }

            return [tag.value, node, slots.default()];
        };

        const data = renderData();
        const tg = `${data[0]}`;
        const node = data[1];
        const content = data[2];

        return () =>
            h(
                tg,
                {
                    onClick: node.on.click,
                    href: node.attrs.href
                },
                content
            );
    }
};

pay attention to the render function we return in the end, we first identify a function called renderData, which returns data for rendering purpose, and console.log() it to show the response:



{
    "a",
    {
        "class": "share-network-facebook",
        "on": {},
        "attrs": {
            "href": "javascript:void(0)"
        }
    }
}

the a tag is

and you can export that and register your component to use

example:




<COSharing network="facebook" :title="'facebook'" url="https://www.google.com" quote="hello" >
 click me to open whatsapp sharing
</COSharing>

quote is for twitter

and when you inspect your element, you will find element wrapped in a tag:



<a href="javascript:void(0)" data-v-5be083fa="">
// whatever your content here 
</a>

and now we have a successful rewrite into Vue3 for vue-social-sharing library, do not need to rely on the update of that package anymore, you can learn to create your own, which is actually a good practice

SolidJS - An alternative to React?

Jingtian Zhang — Thu, 31 Mar 2022 14:06:04 +0000

What is Solidjs?

Today when I am surfing on internet searching for some highly performant frameworks for frontend, I found solidjs, which is a simple and performant reactive building user interfaces.

the project github link is here

Begin

while we can start using a vite-plugin-solid:

npx degit solidjs/templates/js my-solid-project
cd my-solid-project
npm install # or pnpm install or yarn install
npm run start # starts dev-server with hot-module-reloading
npm run build # builds to /dist

then you can manually install vite related plugins :

# with npm
npm install -D vite vite-plugin-solid babel-preset-solid
npm install solid-js

# with pnpm
pnpm add -D vite vite-plugin-solid babel-preset-solid
pnpm add solid-js

# with yarn
yarn add -D vite vite-plugin-solid babel-preset-solid
yarn add solid-js

after installing all those you will find in vite.config.js as

// vite.config.ts
import { defineConfig } from 'vite';
import solidPlugin from 'vite-plugin-solid';

export default defineConfig({
  plugins: [solidPlugin()],
});

the code I use for some demo is here:


import logo from "./logo.svg";
import styles from "./App.module.css";

import {
  createEffect,
  createSignal,
  createMemo,
  createResource,
  Show,
  Switch,
  Match,
} from "solid-js";
import { render, Portal, Dynamic } from "solid-js/web";
const fetchUser = async (id) =>
  (await fetch(`https://swapi.dev/api/people/${id}/`)).json();

const User = () => {
  const [userId, setUserId] = createSignal();
  const [user] = createResource(userId, fetchUser);

  return (
    <>
      <input
        type="number"
        min="1"
        placeholder="Enter Numeric Id"
        onInput={(e) => setUserId(e.currentTarget.value)}
      />
      <span>{user.loading && "Loading..."}</span>
      <div>
        <pre>{JSON.stringify(user(), null, 2)}</pre>
      </div>
    </>
  );
};

function fibonacci(n) {
  if (n <= 1) return 1;
  return fibonacci(n - 1) + fibonacci(n - 2);
}

function Modal() {
  return (
    <div class="container">
      <Portal>
        <div class="popup">
          <h1>Popup</h1>
          <p>Some text you might need for something or other.</p>
        </div>
      </Portal>{" "}
    </div>
  );
}

function Compare() {
  const [x] = createSignal(7);

  return (
    <Switch fallback={<p>{x()} is between 5 and 10</p>}>
      <Match when={x() > 10}>
        <p>{x()} is greater than 10</p>
      </Match>
      <Match when={5 > x()}>
        <p>{x()} is less than 5</p>
      </Match>
    </Switch>
  );
}

function Cats() {
  // <For each={}> to handle for loop, it updates or moves DOM rather than recreating them
  const [cats, setCats] = createSignal([
    { id: "J---aiyznGQ", name: "Keyboard Cat" },
    { id: "z_AbfPXTKms", name: "Maru" },
    { id: "OUtn3pvWmpg", name: "Henri The Existential Cat" },
  ]);
  return (
    <For each={cats()}>
      {(cat, i) => (
        <li>
          <a
            target="_blank"
            href={`https://www.youtube.com/watch?v=${cat.id}`}
            style={{ color: "white" }}
          >
            {i() + 1}: {cat.name}
          </a>
        </li>
      )}
    </For>
  );
}
// wrong naming would not work here
function Btn() {
  const [loggedIn, setLoggedIn] = createSignal(true);
  const toggle = () => setLoggedIn(!loggedIn());

  return (
    <Show when={loggedIn()} fallback={<button onClick={toggle}>Log in</button>}>
      <button onClick={toggle}>Log out</button>
    </Show>
  );
}

function Counter() {
  const [count, setCount] = createSignal(0);
  const fib = createMemo(() => fibonacci(count()));
  const doubleCount = () => count() * 2;
  createEffect(() => {
    console.log("the count is: ", count());
  });
  return (
    <>
      <button onClick={() => setCount(count() + 1)}>Click Me</button>
      {count()} <br />
      {doubleCount()} <br />
      fib: {fib()}
    </>
  );
}

function App() {
  return (
    <div class={styles.App}>
      <p>Counter demos how signal and createEffect / createMemo work</p>
      <Counter /> <p>Btn demos how simple conditional works in Solid</p>
      <Btn />
      <p>Cats demos how list rendering works using For tag </p>
      <Cats />
      <p>Compare demos how switch and match work</p>
      <Compare />
      <p>Modal demos how Portal works </p>
      <Modal />
      <p>Async demos </p>
      <User />
    </div>
  );
}

export default App;

let's take a look one by one, this article will update

Entry and Components

one thing I like solidjs is that class is class instead of className, and the most of others are the same to react jsx writing
solidjs uses render() function to render, takes 2 args, first one is a function, second one is a container

Signal and Effect / Memo

signals are the most basic reactive primitive in solidjs, they track a single value, which can be any JS object that changes over time.

the createSignal function returns a pair of functions as a two-element array: a getter and a setter, basically remind me of useState

here we define a Counter, we define count as a signal, and two derived signals from it, that is fib and doubleCount

let's show how reactivity works in solidjs here, clicking the button to add number, and both doubleCount and fib will update

function Counter() {
  const [count, setCount] = createSignal(0);
  const fib = createMemo(() => fibonacci(count()));
  const doubleCount = () => count() * 2;
  createEffect(() => {
    console.log("the count is: ", count());
  });
  return (
    <>
      <button onClick={() => setCount(count() + 1)}>Click Me</button>
      {count()} <br />
      {doubleCount()} <br />
      fib: {fib()}
    </>
  );
}

createEffect in solidjs is used to create a effect as a function

the effect automatically subscribes to any signal that is read during the function's execution and returns when any of them changes --> kinda like Vue's watch

Flow, Show

JSX allows you to use JS to control the logic flow in the templates, but when virtual DOM is not in use here, use of Array.prototype.map would wastefully recreate all the DOM nodes on every update

for a simple conditional display, solidjs provides a Show tag:

<Show
  when={loggedIn()}
  fallback={<button onClick={toggle}>Log in</button>}
>
  <button onClick={toggle}>Log out</button>
</Show>

fallback prop acts as else and show when the condition passed to when is not true

example here:

// wrong naming would not work here
function Btn() {
  const [loggedIn, setLoggedIn] = createSignal(true);
  const toggle = () => setLoggedIn(!loggedIn());

  return (
    <Show when={loggedIn()} fallback={<button onClick={toggle}>Log in</button>}>
      <button onClick={toggle}>Log out</button>
    </Show>
  );
}

For, Index, Switch, Match

coming to more complex conditionals, we need its provided

to render a list, due to the reason I mention above (no virtual DOM here), solidjs also provides For tag here

in this example we will render a list of index with its content

function Cats() {
  // <For each={}> to handle for loop, it updates or moves DOM rather than recreating them
  const [cats, setCats] = createSignal([
    { id: "J---aiyznGQ", name: "Keyboard Cat" },
    { id: "z_AbfPXTKms", name: "Maru" },
    { id: "OUtn3pvWmpg", name: "Henri The Existential Cat" },
  ]);
  return (
    <For each={cats()}>
      {(cat, i) => (
        <li>
          <a
            target="_blank"
            href={`https://www.youtube.com/watch?v=${cat.id}`}
            style={{ color: "white" }}
          >
            {i() + 1}: {cat.name}
          </a>
        </li>
      )}
    </For>
  );
}

Switch and Match are used when we have to deal with conditionals with more than 2 mutual exclusive outcomes:

function Compare() {
  const [x] = createSignal(7);

  return (
    <Switch fallback={<p>{x()} is between 5 and 10</p>}>
      <Match when={x() > 10}>
        <p>{x()} is greater than 10</p>
      </Match>
      <Match when={5 > x()}>
        <p>{x()} is less than 5</p>
      </Match>
    </Switch>
  );
}

well if you want to write tight and clean code, we can use Dynamic to write

<Switch fallback={<BlueThing />}>
  <Match when={selected() === 'red'}><RedThing /></Match>
  <Match when={selected() === 'green'}><GreenThing /></Match>
</Switch>

# to this 

<Dynamic component={options[selected()]} />

ErrorBoundary, Suspense

well you can capture js error in the UI and fallback to what you want to display, first, define a <Broken />:

const Broken = (props) => {
  throw new Error("Oh No");
  return <>Never Getting Here</>
}

and then use it:

  <div>Before</div>
      <ErrorBoundary fallback={err => err}>
        <Broken />
      </ErrorBoundary>
      <div>After</div>

Lifecycle (onMount, onCleanup, onError)

solidjs has few lifecycle APIs here

onMount(async () => {
  const res = await fetch(`https://jsonplaceholder.typicode.com/photos?_limit=20`);
  setPhotos(await res.json());
});

const timer = setInterval(() => setCount(count() + 1), 1000);
onCleanup(() => clearInterval(timer));

Conclusion

well, solidjs looks interesting, but it seems like Vue3 can do what it sells too, with much richer ecology and other stuff. I personally still stick to Vue.

Build a message component in Vue3

Jingtian Zhang — Thu, 24 Mar 2022 12:37:17 +0000

Intro

in this case lets build a message component in Vue3, lets take a look how some famous UI frameworks, like how Element UI does it

from the demo we know what we need to do:

using transition to show and close the message
control the time of interval
take user input and display in the message container
the message should occur in the middle of screen
messages will not overlap, knowing position of each message is necessary

above are some rough guess when I first time did it, lets walk through and examine

Basic Setup

first, if you need help with how Vue3 work, especially for understanding some customs for <script setup>, check this article of mine

in our case, lets build a message component that can satisfy our need:

message.success("this is a big success")
message.warning("take a look at this warning")
message.error("what a tragedy")

lets start a Vue3 project using Vue CLI:

npm init vue@latest

✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add Cypress for both Unit and End-to-End testing? … No / Yes
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formating? … No / Yes

Scaffolding project in ./<your-project-name>...
Done.

lets construct our structure directory like the following:

- src
-- components // this components directory is for basic UI components, not for detailed components
---- packages
------ message 
-------- co-message.scss // style file
-------- co-message.vue  // template file 
-------- index.js       // component entry file
-------- instance.js    // instance file 
------ components.js // import each component and export as them in specific names
------ index.js // register component globally across te entire project 
-- views // views!!
---- Sample
------ index.vue // where we demo the message component

in this case we are going to use Sass as css extension for better flexibility

you can read more about how to config scss for Vue3 in its doc

we will first build the template Vue file:

<template>
    <transition name="slide-fade">
        <div class="message-container" v-show="visible">
            <!-- content -->
            <div class="message-content">
                <!-- message icon -->
                <div class="message-icon" v-if="config.icon">
                    <i :class="config.icon"></i>
                </div>
                <span v-text="config.content" class="message-text"></span>
                <div class="option" v-if="!config.close">
                    <!-- manually close the message by clicking close icon -->
                    <i class="meta-iconfont meta-Close" @click="onClose"></i>
                </div>
            </div>
        </div>
    </transition>
</template>
<script>
import { reactive, toRefs } from 'vue';
import './co-message.scss'; // import style here

export default {
    props: {
        config: { type: Object, default: () => {} }, // configuration
        remove: { type: Function, default: () => {} } // unmount callback
    },
    setup(props) {
        const state = reactive({
            visible: false
        });
        // open message
        const onOpen = config => {
            setTimeout(() => {
                state.visible = true;
            }, 10);
            // remove message after duration 
            if (config.duration !== 0) {
                setTimeout(() => {
                    onClose();
                }, config.duration);
            }
        };
        onOpen(props.config);
        // onClose event
        const onClose = () => {
            state.visible = false;
            setTimeout(() => {
                props.remove();
            }, 200);
        };
        return {
            ...toRefs(state),
            onOpen,
            onClose
        };
    }
};
</script>

after you setup the template file (can ignore about style file for now), you can setup the instance.js first, it is mainly instructions about how to create an Vue instance and append your component to Body in HTML

instance.js:

import { createApp } from 'vue';
import COMessage from './co-message.vue';

/**
 * Message instance operation
 * @param {*} cfg configuration
 */
const createInstance = cfg => {
    const config = cfg || {};

        // create a container and set its class
    let messageNode = document.createElement('div');
    let attr = document.createAttribute('class');
    attr.value = 'CO-message';
    messageNode.setAttributeNode(attr);

        // set a counter, when the next message happens, it will have a distance from the previous one
    const height = 70; // height, play around 
    const messageList = document.getElementsByClassName('CO-message');
    messageNode.style.top = `${messageList.length * height}px`;


        // reset each message's distance (Top value) to the top 
    const resetMsgTop = () => {
        for (let i = 0; i < messageList.length; i++) {
            messageList[i].style.top = `${i * height}px`;
        }
    };

    const handleRemove = () => {
        app.unmount(messageNode);
        document.body.removeChild(messageNode);
        resetMsgTop();
    };


        // create a Vue instance and append to Body
    const app = createApp(COMessage, {
        config,

                 // remove the element, close message and unmount and remove from DOM
        remove() {
            handleRemove();
        }
    });


        // mount the instance and append to end of Body
    app.vm = app.mount(messageNode);
    document.body.appendChild(messageNode);

    app.close = () => {
        handleRemove();
    };
    return app;
};

export default createInstance;

then you need to use this instance instruction in the entry file as index.js:

import createInstance from './instance.js';

/**
 * read, config and render Message
 * @param {Object} typeCfg 
 * @param {Object/String} cfg
 */
function renderMsg(typeCfg = {}, cfg = '') {
    // allow passing params, need to tell the type 
    const isContent = typeof cfg === 'string';

    // piece together config and merge them
    cfg = isContent
        ? {
                content: cfg
          }
        : cfg;

    const config = Object.assign({}, typeCfg, cfg); // merge configuration
    const {
        type = 'text', // type of message
        icon = '', // your icon
        content = '', // content
        immersive = false, // show immersive? 
        duration = 3000, // set the duration 
        close = false // showClose? 
    } = config;

    // create instance
    return createInstance({
        type,
        icon,
        content,
        immersive,
        duration,
        close
    });
}

export default {
    // purely info
    text(cfg = '') {
        const textCfg = {
            type: 'text',
            icon: ''
        };

        return renderMsg(textCfg, cfg);
    },
    // success ere
    success(cfg = '') {
        const successCfg = {
            type: 'success',
            icon: 'icon-success success'
        };

        return renderMsg(successCfg, cfg);
    },
    // warning here
    warning(cfg = '') {
        const warningCfg = {
            type: 'warning',
            icon: 'icon-warning warning'
        };

        return renderMsg(warningCfg, cfg);
    },
    // error here
    error(cfg = '') {
        const errorCfg = {
            type: 'error',
            icon: 'icon-error error'
        };

        return renderMsg(errorCfg, cfg);
    }

};

feel free to replace icon-success icon-warning and icon-error with other icons such as remix icons, Flaticon, etc.

well, then we need to register it globally and call it directly inside your js code, lets do that first:

there is a components.js file in the same level to message folder:

export { default as COMessage } from './message';

and an index.js file that registers all components:

import * as components from './components';

export default {
    install: Vue => {
        Object.keys(components).forEach(key => {
            Vue.component(key, components[key]);
            if (key === 'COMessage') {
                Vue.config.globalProperties.$message = components[key];
            }
        });
    }
};

after you have done the above job, time to beautify the component using scss:

message.scss:

.CO-message {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    text-align: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    box-sizing: border-box;
    z-index: 9999;
    transform: translateZ(9999px);
    padding-top: 28px;
    pointer-events: none;
    transition: top 0.4s ease;

    .message-container {
        .message-text {
            font-family: Roboto, sans-serif;
            font-style: normal;
            font-weight: 500;
            font-size: 14px;
            line-height: 20px;
        }

        .message-icon {
            display: inline-block;

            i {
                font-size: 18px;
                font-weight: 400;
                margin-top: -3px;
                margin-right: 6px;
                display: inline-block;
                box-sizing: border-box;
                vertical-align: middle;
            }

            .success {
                color: #32b732;
            }

            .warning {
                color: #f2b847;
            }

            .error {
                color: #fb4e4b;
            }

            // 加载图标
            .ri-loader-5-fill {
                display: inline-block;
                animation: rotating 1s ease-in-out infinite;
                -webkit-animation: rotating 1s ease-in-out infinite;
                color: #449efb;
            }

            @keyframes rotating {
                0% {
                    -webkit-transform: rotate(0deg);
                    transform: rotate(0deg);
                }

                100% {
                    -webkit-transform: rotate(359deg);
                    transform: rotate(359deg);
                }
            }
        }

        .message-content {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 16px;
            height: 52px;
            margin-left: 16px;
            margin-right: 16px;
            text-align: left;
            line-height: 45px;
            font-size: 14px;
            font-weight: 400;
            border-radius: 4px;
            color: #595959;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            background: #ffffff;

            span {
                pointer-events: none;
                -moz-user-select: none;
                -o-user-select: none;
                -khtml-user-select: none;
                -webkit-user-select: none;
                -ms-user-select: none;
                user-select: none;
            }

            .option {
                display: inline-block;
                pointer-events: all;
                margin-left: auto;

                i {
                    font-size: 18px;
                    font-weight: 400;
                    margin-top: -3px;
                    display: inline-block;
                    box-sizing: border-box;
                    vertical-align: middle;
                    cursor: pointer;
                    color: #d9d9d9;
                    transition: color 0.2s ease;

                    &:hover {
                        color: #fb4e4b;
                        transition: color 0.2s ease;
                    }
                }
            }
        }

        .message-text-immersive {
            color: #2f7cd4;
            border: 1px solid #96d5ff;
            background: #f0faff;
        }

        .message-success-immersive {
            color: #209124;
            border: 1px solid #81d17b;
            background: #ebf7e9;
        }

        .message-warning-immersive {
            color: #cc9331;
            border: 1px solid #ffe49c;
            background: #fffcf0;
        }

        .message-error-immersive {
            color: #d43538;
            border: 1px solid #ffa69e;
            background: #fff3f0;
        }
    }

    .slide-fade-enter-active {
        transition: all 0.2s ease-out;
    }

    .slide-fade-leave-active {
        transition: all 0.2s ease;
    }

    .slide-fade-enter-from,
    .slide-fade-leave-to {
        transform: translateY(-20px);
        opacity: 0;
    }
}

in this case you have successfully done your job, lets use it in a demo single file component

<template>
<button @click="showSuccessMessage">click me to show success</button>
<button @click="showWarningMessage">click me to show warning</button>
<button @click="showErrorMessage">click me to show error</button>
</template>
<script setup>
import {ref, computed, getCurrentInstance} from "vue";

const { proxy } = getCurrentInstance(); 
const showErrorMessage = () => {
    proxy.$message.error('this is an error message');
};
const showSuccessMessage = () => {
    proxy.$message.success('this is a success message');
};
const showWarningMessage = () => {
    proxy.$message.warning('this is a warning message');
};
</script>

and it should work here

a basic preview via Loom

I have a border Collie, so I call my own demo component library CollieUI, thats why you saw prefix as CO- once it is done will share the Github repo, thx for reading