Creating a custom toast notification with Vue.js / JavaScript and HTML/CSS

This article assumes you have a Nuxt.js or Vue.js project set up and running.

This HTML/CSS toast uses 2 external libraries; TailwindCSS and Animate.css. Only Animate.css is required for the transition, but you could make the @keyframes from scratch as well; without the need for an external library.

These are lightweight dependencies and not required. This tutorial does not use any annoying plugins with jank or large scripts / plugins. You can grab the CSS code from both the libraries yourself, if you just need the code for the toast notifications.

Install TailwindCSS

Nuxt.js

NPM

npm install -D @nuxtjs/tailwindcss tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

Yarn

yarn add -D @nuxtjs/tailwindcss tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

Additionally, add the dependency to your nuxt.config.js.

// nuxt.config.js
export default {
  buildModules: ['@nuxtjs/tailwindcss'],
}

Add Animate.css

Add the following lines to your nuxt.config.js:

head: {
  link: [
    {
      rel: 'stylesheet',
      type: 'text/css',
      href: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.0/animate.min.css',
    },
  },

Be advised: This will add the script to every page on your website. If you only need transitions on a few pages, we recommend adding the dependency via layouts or page-level head() functions. However, the script is only 4.9 kB, so it's not that bad. But every byte counts for the most optimal performance.

Recommendation

We urge you to not include the CDN build, and just grab the animation you need by inlining your critical CSS. CSS is a render-blocking resource which will delay browser rendering and page execution. Therefore, we discourage adding an external resource with a HTTP request which has an average of 100-400 ms to respond. A lot of useless render-blocking time. Save time and space by inlining your critical animation CSS.

We use the CDN build now, because it is easier.