DEV Community: Alvaro Saburido

TresJS v2 First steps with 3D on Vue

Alvaro Saburido — Tue, 20 Jun 2023 12:50:35 +0000

The TresJS team released v2 of TresJS on stage at VueJS Live London 2023 and we made the repo public for the community live on stage.

This version came with a lot of improvements, including some breaking changes (😜 TresJS is now based on Custom Render API), so the first content of the series became obsolete.

So today, we are going to start fresh with the v2 and explain some of the core concepts. The video above is the updated version.

This will be the first article of a series with Basics of TresJS.

It doesn't matter if you don't have previous experience with 3D or ThreeJS, this article will guide you on your first steps using a familiar ecosystem like Vue.

You can follow the series code available on this repository https://github.com/alvarosabu/tresjs-basics

Basic parts of a 3D scene

Before jumping to the code, let me quickly explain the parts that make up a 3D scene

Objects, could be a sphere, a plane, lights, a 3D model of you favorite character (slide show 3D scene examples resembling the words, make pauses )
Then we need a Camera to see those objects, to capture them.
We wrap all in a Scene and then
We tell the Renderer to render everything into a DOM Canvas element.

Installing

To get started we are going to take a Vue app made with Vite, we are going to install the library by using:

pnpm add @tresjs/core three

If we want to have typescript support, we also need to install the latest types using pnpm add @types/three -D . This will ensure that your IDE gets the proper Intellisense.

Usage

Now let’s open our App.vue and remove the default code and leave the script tag and the template tag empty

Next we import the TresCanvas component from the @tresjs/core package:

<script lang="ts" setup>
import { TresCanvas } from '@tresjs/core'
</script>

<template>
  <TresCanvas>

  </TresCanas>
</template>

Something really important to know is that <TresCanvas /> component will create a <canvas /> DOM element which size (width and height) is exactly the one of it's parent. So if you don't see your scene, it's probably because it has a height of 0px.

To avoid that mistake, we are going to add some minimal css into our App.

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}
#app {
  height: 100%;
  width: 100%;
}

TresCanvas Props

As we would do with normal Vue, you can pass props to your TresCanvas component. Here is the list of props available for the renderer

<TresCanvas :clear-color="'#82DBC5">

</TresCanas>

This will set the background color of the scene to a fun one, however, we still see only a blank page right 🤔?

That's because we haven't add a Camera yet.

Perspective Camera

To be able to see (render) our scene, we need a camera, specifically a Perspective Camera which is the most similar to how camera works on videos or cinema.

<TresCanvas :clear-color="'#82DBC5">
 <TresPerspectiveCamera />  
</TresCanas>

Now you should be seeing something like this on your browser.

Psst 🙊, this is gonna be improved on upcoming v2.2 where there is a default PerspectiveCamera added by default.

Adding an object

So now that we have "something" render on the browser, let's add a 3D Object.

A Mesh (a.k.a your object) is the rendering result of combining:

Geometry: the structure composed of points (vertices), lines (edges) and polygons (faces).
Material: are the visual properties of that object, it's color, texture, how reflective it is, if it shines etc.

All we need to add to our template is a <TresMesh /> component.

<TresMesh>
   <TresBoxGeometry/>
   <TresMeshNormalMaterial />
</TresMesh>

Notice how we pass 2 more components via slots, the TresBoxGeometry and the TresMeshNormalMaterial, both custom render components based on THREE.BoxGeometry and THREE.MeshNormalMaterial from ThreeJS.

For now, we are going to use a cube with a normal material that resembles the RGB colors (looks pretty cool). In the follow up series we are going to go deeper in Geometries and Materials.

Initialise instances with `args`

In the previous example we created a Cube of 1x1x1. How can we tell TresJS to create a wider box? We can use args prop to initialise the instance with different arguments.

<TresMesh>
   <TresBoxGeometry :args="[2,1,1]"/>
   <TresMeshNormalMaterial />
</TresMesh>

The result should be something like this:

To check what arguments the component expect, you can easily search for the constructor arguments available on the ThreeJS docs

Transform the object

Transforming your mesh is easier that you would imagine. You just need to set a prop for:

Position
Rotation
Scale

You can pass an array of numbers [1, 2, 3] where [x,y,z], or a new THREE.Vector(1,2,3) vector. TresJS will format it for you.

Position

To change the position of an object relative to the world origin [0,0,0] just pass a value to the prop like this:

<TresMesh :position="[1,2,-1]">
   <TresBoxGeometry/>
   <TresMeshNormalMaterial />
</TresMesh>

Rotation

In addition to changing the position of an object, you may also want to adjust the rotation. This is typically done using Euler angles in the x, y, and z dimensions. The rotation values are given in radians.

For instance, if you want to rotate an object 90 degrees about the Y axis, you will use Math.PI/2 as the value. You may specify the rotation of the object with the rotation prop, which also takes an array of three values or a Vector3, representing rotations along the x, y, and z axis respectively. Here's an example:

<TresMesh :rotation="[Math.PI/4, Math.PI/2, 0]">
   <TresBoxGeometry/>
   <TresMeshNormalMaterial />
</TresMesh>

In this example, the mesh is rotated 90 degrees around the Y axis and 45 degrees on the X axis. Notice that we didn't rotate it around Z (values are 0).

Scale

The scale of an object determines its size in the 3D world. It's specified in terms of the scale prop. By default, the scaling factor of an object is 1 in all directions.

You can use the scale prop to make an object larger or smaller. For instance, if you want to make an object twice as wide and half as tall, you could pass [2,0.5,1] as the value to the scale prop, like so:

<TresMesh :scale="[2, 0.5, 1]">
   <TresBoxGeometry/>
   <TresMeshNormalMaterial />
</TresMesh>

Transform the Camera

Just like other objects in the 3D world, the camera in a 3D scene can also be manipulated in terms of its position and rotation. In Vue, this can be done using the TresPerspectiveCamera component. This is particularly useful to frame the view of your scene to fit your specific needs.

Unlike other objects, though, the camera also has the ability to "look at" a particular point in the scene. This is not equivalent to rotation, as rotation for the camera involves changing the direction it's facing. Instead, "look at" sets the direction the camera is facing to point directly at a specific point.

Here's an example of how you might change the position of the camera and have it look at the center of the scene:

<TresPerspectiveCamera 
    :position="[10,10,10]"
    :lookAt="[0,0,0]"
/>

In this example, the camera is positioned at the coordinates [10,10,10], which would place it in the top right front corner of the scene when looking from the origin. The lookAt prop is used to direct the camera towards the center of the scene, [0,0,0].

The "look at" functionality is extremely useful for focusing the camera on specific areas of a 3D scene, especially when used in combination with adjusting the camera's position. By manipulating these properties, you can achieve an ideal perspective for your particular 3D scene.

Conclusion

In this article, we've explored the core aspects of creating 3D scenes using Tres.js v2 in a Vue application. We started off with the installation process of Tres.js, leading into a basic understanding of 3D scenes, and how to setup the TresCanvas.

We discussed the perspective camera, which is a critical component of a 3D scene. This sets the viewpoint from which your scene will be observed. We also covered how to add objects (meshes) to the scene, which require a geometry and a material. The geometry determines the shape of the object, while the material defines its appearance.

From there, we explored transformation properties, including position, rotation, and scale, which allow you to control where your object is, how it's oriented, and what size it is in the scene. Furthermore, we've seen that not only meshes, but any object in the 3D world, including the camera itself, can be transformed and manipulated to fit the needs of your scene.

This provides a solid basis for getting started with 3D scenes in Vue using Tres.js. Remember, this is just the beginning - there's a whole world of complex and beautiful 3D scenes you can create from here!

As always, if you have any questions, comments, or insights you'd like to share, please feel free to leave them below. Your feedback is not only welcomed, but highly appreciated as it helps us all learn and grow. And remember to stay tuned for more articles in this series as we dive deeper into the fascinating world of 3D modeling with Tres.js and Vue!

Happy coding 😊✌️

Build 3D Scenes Declaratively with TresJS using Vue

Alvaro Saburido — Wed, 22 Feb 2023 11:13:48 +0000

For a more interactive experience, read this article here alvarosaburido.dev.

What if I tell you that this scene right here:

It's entirely done using Vue components, yes, Vue components 🤯.

<script setup lang="ts">
import { useGLTF, useTweakPane } from '@tresjs/cientos'
import { useRenderLoop } from '@tresjs/core'
import { shallowRef, watch } from 'vue'
import Airplane from './Airplane.vue'
import Cloud from './Cloud.vue'

const { scene: planet } = await useGLTF(
  'https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/low-poly/planet.gltf',
)

const { pane } = useTweakPane()

const planetRef = shallowRef()

planet.traverse(child => {
  if (child.isMesh) {
    child.receiveShadow = true
  }
})

watch(
  () => planetRef.value,
  planet => {
    if (!planet) return
    pane.addInput(planetRef.value, 'visible', { label: 'Planet' })
  },
)

const { onLoop } = useRenderLoop()

onLoop(({ delta }) => {
  if (!planet) return
  planet.rotation.y += delta * 0.04
  planet.rotation.z += delta * 0.02
  planet.rotation.x += delta * 0.05
  planet.updateMatrixWorld()
})
</script>
<template>
  <TresMesh ref="planetRef" v-bind="planet" />
  <Airplane :planet="planetRef" />
  <Cloud v-for="cloud of [1, 2, 3, 4, 5, 6, 7, 8, 9]" :key="cloud" :planet="planetRef" />
</template>

That's the magic of TresJS, a declarative way of using ThreeJS with Vue components! If you've ever tried to create 3D experiences on the web with ThreeJS, you know how powerful it is but also how complex it can be. TresJS aims to simplify the process and make it more approachable by leveraging the power of Vue's declarative syntax.

Whether you're a seasoned developer or a beginner, TresJS can help you create stunning 3D visuals with less code and less hassle. In this tutorial, we'll cover the basics of TresJS and show you how to create your first 3D scene using Vue components.

By the end of this tutorial, you'll have a solid understanding of how TresJS works and how to use it to create 3D scenes with ease. So, let's get started and see what TresJS can do for you!

You can find the documentation here.

The mighty getting started step

pnpm add three @tresjs/core -D

You can install TresJS as any other Vue plugin

import { createApp } from 'vue'
import App from './App.vue'

import Tres from '@tresjs/core'

export const app = createApp(App)

app.use(Tres)
app.mount('#app')

Setting up the experience Canvas

Before we can create a Scene, we need somewhere to display it. Using plain ThreeJS we would need to create a canvas HTML element to mount the WebglRenderer :

const canvas = document.querySelector('canvas'):

const renderer = new THREE.WebGLRenderer(canvas);

With TresJS you only need to add the default component <TresCanvas /> to the template of your Vue component.

<template>
  <TresCanvas> // Your scene is going to live here 
  </TresCanvas>
</template

The TresCanvas component is going to do some setup work behind the scene:

It creates a WebGLRenderer that automatically updates every frame.
It sets the render loop to be called on every frame based on the browser refresh rate.

Creating a scene

We need 3 core elements to create a 3D experience:

A Camera
An Object
A Scene to hold the camera and the object(s) together.

With plain ThreeJS we would initialise a scene and a camera instance and then pass them to the renderer method render

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

// And then we render a frame
renderer.render( scene, camera );

With TresJS you can create a Scene using the <TresScene /> component.

<template>
  <TresCanvas>
    <TresScene>
      <!-- Your scene goes here -->
    </TresScene>
  </TresCanvas>
</template>

Then you can add a PerspectiveCamera using the <TresPerspectiveCamera /> component.

<template>
  <TresCanvas>
    <TresPerspectiveCamera />
    <TresScene>
      <!-- Your scene goes here -->
    </TresScene>
  </TresCanvas>
</template>

But wait! What if I want to initialize the camera with some default parameters, like the field of view (fov) THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

Arguments

Some ThreeJS objects have arguments, for example, the PerspectiveCamera constructor has the following arguments:

fov - Camera frustum vertical field of view.
aspect - Camera frustum aspect ratio.
near - Camera frustum near plane.
far - Camera frustum far plane.

To pass these arguments to the TresPerspectiveCamera component, you can use the args prop:

<template>
  <TresCanvas>
    <TresPerspectiveCamera :args="[45, 1, 0.1, 1000]" />
    <!-- Your scene goes here -->
  </TresCanvas>
</template>

Adding a Donut 🍩

That scene looks a little empty, let's add a basic object. If we where using plain ThreeJS we would need to create a Mesh object and attach to it a Material and a Geometry like this:

const geometry = new THREE.TorusGeometry(1, 0.5, 16, 32)
const material = new THREE.MeshBasicMaterial({ color: 'orange' })
const donut = new THREE.Mesh(geometry, material)
scene.add(donut)

A Mesh is a basic scene object in three.js, and it's used to hold the geometry and the material needed to represent a shape in 3D space.

Now let's see how we can easily achieve the same with TresJS. To do that we are going to use <TresMesh /> component, and between the default slots, we are going to pass a <TresTorusGeometry /> and a <TresMeshBasicMaterial />.

<template>
  <TresCanvas>
    <TresPerspectiveCamera :args="[45, 1, 0.1, 1000]" />
    <TresScene>
      <TresMesh>
        <TresTorusGeometry />
        <TresMeshBasicMaterial color="orange" />
      </TresMesh>
    </TresScene>
  </TresCanvas>
</template>

Notice that we don't need to import anything, thats because TresJS automatically generate a Vue Component based of the Three Object you want to use in CamelCase with a Tres prefix. For example, if you want to use a AmbientLight you would use <TresAmbientLight /> component.

Props

You can also pass props to the component, for example, the TresAmbientLight has a intensity property, so you can pass it to the component like this:

<TresAmbientLight :intensity="0.5" />

Set

All properties whose underlying object has a .set() the method has a shortcut to receive the value as an array. For example, the TresPerspectiveCamera has a position property, which is a Vector3 object, so you can pass it to the component like this:

<TresPerspectiveCamera :position="[1, 2, 3]" />

Scalar

Another shortcut you can use is to pass a scalar value to a property that expects a Vector3 object, using the same value for the rest of the Vector:

<TresPerspectiveCamera :position="5" /> ✅

<TresPerspectiveCamera :position="[5, 5, 5]" /> ✅

Color

You can pass colors to the components using the color prop, which accepts a string with the color name or a hex value:

<TresAmbientLight color="teal" /> ✅

<TresAmbientLight color="#008080" /> ✅

And with that, you have everything to get started with TresJS and its cool features. Stay tuned for more articles where we will discover more awesome stuff.

FAQ

Is TresJS open source?

Not yet, but it will be soon, we are still figuring out proper CI/CD and better Typing support

Is there a Nuxt module?

Not yet, but is planned for earlier this year (2023). For now, you can extend nuxtApp.vueApp context with a Nuxt plugin

Can I contribute?

Yeeees 🔥! Just drop me a DM on Twitter @alvarosabu

Video

If you prefer a video format for this tutorial, you can visit it here

Deploying a Nuxt Site on Netlify between a pnpm monorepo

Alvaro Saburido — Wed, 06 Jul 2022 08:05:00 +0000

I've been walking through the fine line between over-engineering and learning new integration possibilities with my portfolio crafting.

Because, yes I'm one of those developers who like to complicate his life for the bigger purpose of learning and "probably" implementing this knowledge in future projects.

Today's articles explain how to successfully deploy a static site with Nuxt v3.0.0 between a pnpm monorepo on Netlify.

For this tutorial, I'm assuming you have a basic understanding of monorepos, npm packages, deploying apps to Netlify, and a little bit of CI/CD. If this list sounded like phrases coming from a Chewbacca to you, consider investigating a little before coming back here to properly get some value out of it.

It sounds very specific, but if you find yourself in the same use-case, this is the article for you.

You can find the code for this repo here https://github.com/alvarosabu/pnpm-monorepo-nuxt

The initial idea

Before you think I'm crazy, this is what I wanted to achieve:

Sounds simple, a packages folder containing different libs such as a UI library with my design system done in VueJS, a Typescript lib with utilities and Portfolio website below an apps directory made with Nuxt v3 that will consume several resources from the packages between the monorepo.

I liked the idea of being able to create the UI and utils packages on the road and test them directly on the portfolio without the need for extra playgrounds. Then being able to publish and release npm packages from them to install it in other projects easily.

If you are not planning to publish multiple packages (public or private) then a monorepo might not be the answer for you. A simple repo with a good structure would be enough.

Choosing PNPM workspaces

At the moment I started to transform this draft of an idea into an actual thing, and did some investigation on which monorepo technologies would suit me the most.

I started with Lerna in the early phases, I was using it with yarn workspaces and the whole CI/CD process was pretty smooth using Semantic Release.

On the road, I discover pnpm as a faster alternative to npm/yarn, also several of my favorite OSS projects were using it (Vite, Vueuse, etc), I decided to give it a try.

Then Lerna announced its temporally archive due to lack of maintenance this year by its lead maintainer, later to being taken over stewardship by Nrwl, check the announcement here

Before that announcement, several users of Lerna (including me) were looking for an alternative that allowed us to easily create and maintain a monorepo of these characteristics.

Since I was using pnpm, I found out that it has a built-in support for monorepos by creating a Workspace. There it was the solution that I needed.

All you need to do is add a pnpm-workspace.yaml with the following content:

packages:
  # all packages in subdirs of packages/ and app/
  - 'packages/**'
  - 'apps/**'

And tweak your package.json to add this:

// package.json

{
  ...
  "workspaces": [
    "apps/**",
    "packages/*"
  ],
  ...
}

We're ready to move to the next step

Nuxt

Being a VueJS and Nuxt fanboy as I'm 🤪, jokes aside, is the framework find myself enjoying the most when coding. It wasn't a difficult choice for me to do my Portfolio with a recently stable Nuxt v3.0.0-rc.

For those of you that are not familiar with The Nuxt ecosystem, is a hybrid Vue framework that allows you to easily create SSR, CSR or SSG experiences with an amazing DX (Developer Experience)

To get started just run this command inside of the apps directory:

pnpm dlx nuxi init portfolio

When installing the dependencies, is important to use the shamefully-hoist flag. (I don't really fully understand why, better explained here)

pnpm install --shamefully-hoist

And voilá, by running pnpm run dev this beautiful welcome screen showed up in my browser:

Before we jump into the Netlify config there is a final thing we need to set on our brand new Nuxt. Since I want to generate the project statically I will use nuxt generate

Netlify

This is the part where things start to get interesting 🤭.

Netlify is a cloud computing platform that offers hosting and serverless backend services for web apps and static websites.

I personally use it a lot and to be completely fair, I have never used it for such complex integration. Most of the time was to deploy sites for clients, one or another reproduction, slides for a conference talk, some OSS libraries documentation under my domain, you know, easy stuff.

So following the Netlify's documentation for monorepos we can add a netlify.toml file on the root of the repository with the [build].base pointing to the portfolio directory apps/blog like this:

[build.environment]
  NODE_VERSION = "16"
[build]
  base = "apps/blog/"

Then we need a publish directory so Netlify knows where the deploy-ready HTML files and assets generated by the build are located.

Whenever we run nuxt generate, it will prompt the following:

It seems we found our directory .output/public, we can update the netlify.toml to:

[build.environment]
  NODE_VERSION = "16"
[build]
  base = "apps/blog/"
  publish = ".output/public"

🤔 That should work right?

The next thing to set is the build command. This was the moment I realized that Netlify does not support PNPM right away yet (at the time of writing there is a Feature Request open).

🥲 The world seemed to collapse in front of my eyes (drama), Oh no! I will need to get back to yarn, or even worse, to bare npm 😭 (more drama).

I stopped and thought, what would my heroes do at this moment?

Yeeeess!! Let see how Vite netlify config for docs was looking like and BAAAM 💥 there was the answer to our needs:

[build.environment]
  NODE_VERSION = "16"
  NPM_FLAGS = "--version" # prevent Netlify npm install
[build]
  base = "apps/blog/"
  publish = ".output/public"
  command = "npx pnpm i --store=node_modules/.pnpm-store --frozen-lockfile && npx pnpm run generate"

We added a NPM_FLAGS property to prevent Netlify to install packages with npm by default. Then we use npx to install pnpm and then run any command that we want.

And don't forget the redirects:

[[redirects]]
  from = "/*"
  to = "index.html"
  status = 200

Let's see what happens... 🤔

If we push and check the deployment on Netlify, we will see that is complaining about Failed to resolve entry for package "@pnpm-monorepo-nuxt/ui".

Let's see how to solve all the different troubles that can happen.

Trouble Shooting

Building the UI package

As the log above explains, our blog app is not able to resolve the UI package. So we will need to build it before we generate the blog.

On our apps/blog/package.json we can add a new script called generate:ci

//package.json
  "scripts": {
    "generate:ci": "pnpm run -w build:ui && nuxt generate",
  }

Notice the use of pnpm run with a -w flag, this allows to run the command from the root.

Now let's add that command to our root package.json like this:

"scripts": {
    "build:ui": "pnpm --dir packages/ui build",
  }

Last step will be update the command on the netlify.toml to this new generate:ci

[build]
  base = "apps/blog/"
  publish = ".output/public"
  command = "npx pnpm i --store=node_modules/.pnpm-store --frozen-lockfile && npx pnpm run generate:ci"

Annnnnnnnnnnnnnnd.

#"@%·" ok Alvaro, don't fall into eternal down-spiral of darkness... just breath.

Getting the Publish directory right

Gotta admit this part was a little frustrating for me. Following what Nuxt prompt when using nuxt generate the static files to deploy would be inside .output/public right?.

At this point, I was not able to find any real-life example of a Nuxt3 SSG deployed between a pnpm monorepo. All the references on internet were pretty simple, a Nuxt3 app on a simple repo, just push a Nitro preset will do the magic for you, all worked fine.

Why it was failing in this specific case? I search Netlify Monorepo Docs, Nuxt3 docs about deployment and I couldn't find any clue.

I tried every combination of things you can imagine, went to the multiverse and back, changing the base directory, the commands, everything.

So I did the unthinkable. I gave up by tweeting my frustration about the integration:

// Detect dark theme var iframe = document.getElementById('tweet-1530205877533347840-361'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1530205877533347840&theme=dark" }

Then a Hero landed heroically into the thread:

Daniel Roe is well-known architect that works on the Nuxt Framework and an OSS saviour.

So we jumped on Discord, I created the reproduction repo and send him the logs and explained the context. (Here I want to make a special mention of the fact that Dani was on holiday, and his dedication to helping is so big, that he took the time to help 1 user, me, to solve my issue, I was amazed 😍)

After a few messages:

Issue is your dist symlink. Just remove it.
It was set to an absolute path rather than a relative one

🤔 wait what.... so maybe if I change the publish directory for ./dist it would work? Worth trying.

😱 IT WORKED!!!! IT FINALLY WORKED!!!!

But why? Why does the publish needs to be ./dist and not .output/public

The answer is right here in the code of Nitro is the server-engine of Nuxt.

It's because the Netlify Preset sets it to dist by default rather than .output (Because that's the netlify default location).

That's intended to support zero-config. So I asked if it makes sense to add zero-config preset for deploying between a monorepo. There is already an issue opened that could make it possible.

`workspaceDir` #11074

pi0 posted on May 20, 2021

For the conditions that nuxt app is not in the root of workspace/repository directory, often issues happen. Currently, we have an internal modulesDir option that helps to resolve this by creating a list of directories looking for node_modules (and by default process.cwd() is added to this list) but it is neither explicit or solving all cases.

Related issues:

nuxt/framework#132
nuxt/bridge#123
https://github.com/nuxt/image/issues/235
https://github.com/nuxt/vite/pull/138

Vite tries to find root by looking up for pnpm-workspace.yaml or a package.json with workspaces key but it is not enough since there are conditions user is not using a monorepo workspace but simply have nuxt app in a sub-directory. (https://vitejs.dev/config/#server-fsserve-root)

We can implement this by looking up (from rootDir) for first package.lock, package-lock.json or package.json that has workspaces key (unless there is a package.json in rootDir?) and falling back to rootDir if couldn't find. and also giving users ability to customize it with a nuxt option.

View on GitHub

Final Form

Until a zero-config preset for monorepos is out there, you can use this final form of the netlify.toml to make it work 😜.

[build.environment]
  NODE_VERSION = "16"
  NPM_FLAGS = "--version" # prevent Netlify npm install
[build]
  base = "apps/blog/"
  publish = "./dist"
  command = "npx pnpm i --store=node_modules/.pnpm-store --frozen-lockfile && npx pnpm run generate:ci"
[[redirects]]
  from = "/*"
  to = "index.html"
  status = 200

Wrap up

This long experience helped me to understand a lot of things, like how pnpm monorepos work, how Nuxt is deployed on Netlify and most important:

The immense human quality and dedication of the contributors of OSS (In this case Daniel Roe from Nuxt and Zoltan Kochan of pnpmjs)

Please consider Sponsor their work in the links above.

You can find the code for this repo here https://github.com/alvarosabu/pnpm-monorepo-nuxt

It's all for today folks. Happy coding!!!

5 Javascript Utility functions I love the most ️

Alvaro Saburido — Thu, 19 Aug 2021 13:01:27 +0000

Despite all the "trendy" tweets complaining about Javascript being too difficult (most coming from non-users 😅), Javascript is a marvelous language that allows us to create amazing stuff on the web.

Sometimes we found ourselves doing the same cool stuff over and over again in our projects, it could be a function to format the response of an API, to format dates, to check the current browser used.

What do we do if we have a function we need to re-use across the same project? We create a utility function.

In this article, I want to share my top 5 favorite Javascript utility functions that I use constantly on my projects. As a warning ⚠️, I'm not including methods like map, reduce, filter because they are built-in on the standard and do not require any customization.

Second disclaimer ⚠️, this article is very opinionated, I'm not a Javascript Guru, this is based on my personal likes and some of them maybe have a better way to be done, if so, don't hesitate to comment on your opinion & improvements, constructive feedback is well received.

5. Slugify

Sometimes we need to programmatically format a blog post title like one of my previous posts Vite 2 - A speed comparison in Vue into a string at the end of the domain URL.

This unique identifier string vite-2-a-speed-comparison-in-vue is what we call a Slug

As a standard, the slug formatting should be:

lowercase: to avoid casing issues.
use of -: spaces and multiple '-' should be replaced with single '-'.
trimmed: from the start of the text.

The function takes a string parameter (in case of using Javascript only, use .toString() to ensure that the parameter is converted to string), then we use toLowerCase() to remove any casings and take advantage of the power of Regex to ensure all the previous requirements listed are fulfilled.

4. Mock Async

This one is especially versatile, let's put ourselves in context.

There will be times you will not have access to the Rest API or the BE team is low on capacity and you need to move forward the Frontend part of a ticket beforehand. I know, it's not ideal, but this utility becomes handy to test async code (like an API call) and be able to easily integrate your code once BE work is done.

Async === Promises so we basically create a new Promise with a setTimeout that resolves or reject depending on a boolean parameter.

const fakeAPICall = (success, timeout, value) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (success) {
        resolve(value);
      } else {
        reject({ message: 'Error' });
      }
    }, timeout);
  });
};

async function loadPosts() {
   try {
      const { data } = await fakeAPICall(true, 2000, 
      MOCK_POSTS_RESPONSE);

      return data.posts;

   }, catch(error) {
     // Do what you need to do
   }
}
```



Another perfect fit for this function is testing async behaviors in **unit testing** like error handling on a component.

## 3. Is utility functions

I might be cheating here so I apologize in advance because this one is not a single utility function but a bunch of them.


  


They're straightforward enough but yet so powerful on everyday code. You need to conditionally check if the parameter of a function is an </span><span class="nb">Object</span><span class="s2"> or an </span><span class="nb">Array</span><span class="s2">? You got it </span><span class="nx">isObject</span><span class="s2"> and </span><span class="nx">isArray</span><span class="s2"> . Need to check if the browser is Safari (I hope you don't need to) you got </span><span class="nx">isSafari</span><span class="s2">.

You can also see the value on composing functions, on the gist example, </span><span class="nx">isEmpty</span><span class="s2"> functions use </span><span class="nx">isObject</span><span class="s2"> and </span><span class="nx">isArray</span><span class="s2"> internally.

  
  
   2. Deep Clone




This one still makes me very nervous. I remember spending hours and hours on a good solution to copy a deeply nested object or array into a new one without referencing (to avoid mutations).

Javascript offers several Shallow Copy options like </span><span class="nb">Object</span><span class="p">.</span><span class="nx">assign</span><span class="s2">, the problem with those is that even if it creates an exact copy of the original object, if any of the properties is itself an object or array, it will copy the reference to that object. Check this article to get a deeper understanding of the topic.


  


What this function does essentially, is recursively (remember we might have nested objects inside arrays inside nested objects, infinite possibilities) check if the value of a property is a simple value or more complex and iterate into all the keys internally.

The result is an exact copy of the original item without references.

That brings us to the number one, drumrolls please 



.

.

.

.

.

  
  
   1. 🎉 snakeToCamel (🐍 to 🐫)


Frontend and Backend Developers we are indeed, very different creatures, but if there is anything that separates us the most is:

> How we case our properties.

Jokes aside (there is a really funny article about it here), if you benchmark various business-significant APIS you will found out that by default, they use </span><span class="nx">snake</span><span class="o">-</span><span class="k">case</span><span class="s2"> formatting in the JSON response instead of the beautiful and visually pleasant </span><span class="nx">camelCase</span><span class="s2"> we use in the Frontend.

Let's take Github's user repositories response as an example. If you fetch mine </span><span class="nx">https</span><span class="p">:</span><span class="c1">//api.github.com/users/alvarosaburido/repos you will get a response where repo info looks similar to this:

{% raw %}

```JSON

{

    "id": 337852842,

    "node_id": "MDEwOlJlcG9zaXRvcnkzMzc4NTI4NDI=",

    "name": "alvaro-dev-labs-",

    "full_name": "alvarosaburido/alvaro-dev-labs-",

    "private": false,

    "homepage": null,

    "size": 53,

    "stargazers_count": 0,

    "watchers_count": 0,

    "language": "JavaScript",

    "has_issues": true,

    "has_projects": true,

    "has_downloads": true,

    "has_wiki": true,

    "has_pages": false,

    "forks_count": 1,

    "mirror_url": null,

    "archived": false,

    "disabled": false,

    "open_issues_count": 1,

    "license": null,

    "forks": 1,

    "open_issues": 1,

    "watchers": 0,

    "default_branch": "main"

}

<span class="p">{</span><span class="o">%</span> <span class="nx">endraw</span> <span class="o">%</span><span class="p">}</span>


<span class="nx">So</span> <span class="nx">how</span> <span class="nx">we</span> <span class="nx">can</span> <span class="nx">format</span> <span class="k">this</span> <span class="nx">to</span> <span class="nx">be</span> <span class="nx">able</span> <span class="nx">to</span> <span class="nx">use</span> <span class="p">{</span><span class="o">%</span> <span class="nx">raw</span> <span class="o">%</span><span class="p">}</span><span class="s2">`repo.fullName`</span><span class="p">{</span><span class="o">%</span> <span class="nx">endraw</span> <span class="o">%</span><span class="p">}</span> <span class="nx">or</span> <span class="p">{</span><span class="o">%</span> <span class="nx">raw</span> <span class="o">%</span><span class="p">}</span><span class="s2">`repo.defaultBranch`</span><span class="p">{</span><span class="o">%</span> <span class="nx">endraw</span> <span class="o">%</span><span class="p">}?</span> 

<span class="nx">You</span> <span class="nx">could</span> <span class="nx">deconstruct</span> <span class="nx">it</span> <span class="nx">and</span> <span class="nx">assign</span> <span class="nx">a</span> <span class="k">new</span> <span class="nx">variable</span> <span class="kd">with</span> <span class="nx">the</span> <span class="nx">camelCase</span><span class="p">,</span> <span class="nx">which</span> <span class="nx">would</span> <span class="nx">be</span> <span class="nx">very</span> <span class="nx">inefficient</span><span class="p">.</span> 

<span class="nx">I</span> <span class="nx">prefer</span> <span class="nx">to</span> <span class="nx">deeply</span> <span class="nx">format</span> <span class="nx">objects</span> <span class="nx">using</span> <span class="k">this</span> <span class="nx">pair</span> <span class="k">of</span> <span class="nx">utilities</span><span class="p">:</span> 

<span class="p">{</span><span class="o">%</span> <span class="nx">gist</span> <span class="na">https</span><span class="p">:</span><span class="c1">//gist.github.com/alvarosaburido/50c87cdd04b40b2ff624003ba3f52139 %}</span>

<span class="nx">BAM</span> <span class="nx">magic</span><span class="o">!</span> <span class="p">(</span><span class="nx">Not</span> <span class="nx">really</span><span class="p">,</span> <span class="nx">just</span> <span class="nx">recursion</span> <span class="nx">and</span> <span class="nx">regex</span><span class="p">)</span> <span class="nx">we</span> <span class="nx">can</span> <span class="nx">safely</span> <span class="nx">format</span> <span class="nx">the</span> <span class="nx">DTO</span> <span class="nx">and</span> <span class="nx">create</span> <span class="nx">our</span> <span class="nx">objects</span> <span class="nx">on</span> <span class="nx">the</span> <span class="nx">Frontend</span><span class="p">.</span> 

<span class="o">!</span><span class="p">[</span><span class="nx">Screenshot</span> <span class="mi">2021</span><span class="o">-</span><span class="mi">08</span><span class="o">-</span><span class="mi">19</span> <span class="nx">at</span> <span class="mf">14.54</span><span class="p">.</span><span class="mi">14</span><span class="p">](</span><span class="na">https</span><span class="p">:</span><span class="c1">//dev-to-uploads.s3.amazonaws.com/uploads/articles/mas3f07u7p4s3l9dz7do.png)</span>


<span class="nx">It</span><span class="dl">'</span><span class="s1">s... so..beautiful. 😭

![](https://media.giphy.com/media/gwBouIIUuVvuE/giphy.gif?cid=ecf05e47703j81z92q1kqapqxkd69ko9ghk2105bedpns7ut&amp;rid=giphy.gif&amp;ct=g)  

## Wrap up.

That</span><span class="dl">'</span><span class="nx">s</span> <span class="nx">pretty</span> <span class="nx">much</span> <span class="nx">about</span> <span class="nx">it</span><span class="p">,</span> <span class="k">if</span> <span class="nx">you</span> <span class="nx">reach</span> <span class="nx">here</span><span class="p">,</span> <span class="nx">thank</span> <span class="nx">you</span> <span class="k">for</span> <span class="nx">reading</span> <span class="nx">I</span> <span class="nx">hope</span> <span class="k">this</span> <span class="nx">article</span> <span class="nx">has</span> <span class="nx">helped</span> <span class="nx">you</span> <span class="k">in</span> <span class="nx">some</span> <span class="nx">way</span><span class="p">.</span>

<span class="nx">If</span> <span class="nx">you</span> <span class="nx">have</span> <span class="nx">any</span> <span class="nx">comments</span><span class="p">,</span> <span class="nx">questions</span><span class="p">,</span> <span class="nx">or</span> <span class="nx">just</span> <span class="nx">what</span> <span class="nx">to</span> <span class="nx">say</span> <span class="nx">hi</span><span class="p">,</span> <span class="kd">let</span><span class="dl">'</span><span class="s1">s meet in the comment section.

Happy Coding!
</span></code></pre></div>

Fancy favicon external link component in Vue

Alvaro Saburido — Tue, 01 Jun 2021 10:50:38 +0000

Have you notice that several apps such as Confluence automatically add a pretty little favicon just left to the link whenever you paste one?

Sometimes the subtle things are the most enjoyable, specially when talking about UX.

In this tutorial I will show you how to create a link component that automatically grabs the favicon of the link.

I'm gonna asume you have the basics of Vue + Composition API before continuing.

Create a link component

Le's start by creating a component wrapper for the link, we will call it our FaviconFancyLink.vue

<template>
  <a :href="href" class="fancy-link"><slot /></a>
</template>
<script>

const props = {
  href: {
    type: String
  },
};

export default {
  name: 'FaviconFancyLink',
  props,
}
</script>

<style scoped>
.fancy-link {
  border: 1px solid #ababab;
  border-radius: 3px;
  padding: 0.1rem 6px 0.1rem 24px;
  text-decoration: none;
  background: gray;
}
</style>

The component as now is pretty simple, you pass href as a prop and you pass it down to the <a> tag.

We could even improve this by using v-bind="$attrs" instead of props so we get all the other attributes for links but for now, let's keep it simple.

Getting the favicon

This is where the magic happens, you can easily get the favicon using Google's Favicon Service

https://www.google.com/s2/favicons?domain=dev.to

The trick is to get the hostname from the href prop and add add the image with the favicon api dynamically.

Best way to get the hostname is by using a regex like this:

function getDomain(url) {
  return url.match(/:\/\/(.[^/]+)/)[1];
}

Next step will be to add the favicon image to the link. Easiest way is to use a computed property to add styles with the icon as a background-image

<script>
import { computed } from 'vue';

const props = {
  href: {
    type: String
  },
};

export default {
  name: 'FaviconFancyLink',
  props,
  setup(props) {
      const styles = computed(() => ({
      background: `url(http://www.google.com/s2/favicons?domain=${getDomain(
        props.href
      )}) 4px center no-repeat`,
    }));

    return {
      styles
    };
  }
</script>

Now, let's bind styles into the <a /> element

<template>
  <a :href="href" class="fancy-link" :style="styles"><slot /></a>
</template>

Add it to your app

Now let's add our fancy link component and see the magic

  <div class="links">
    <FaviconFancyLink href="https://dev.to">Dev.to</FaviconFancyLink>

    <FaviconFancyLink href="https://twitter.com/">Twitter</FaviconFancyLink>

    <FaviconFancyLink href="https://alvarosaburido.dev/"
      >AS - Portfolio</FaviconFancyLink
    >
  </div>

After styling it you will get something like this

And that's pretty much it, easy right? If you enjoy this short tutorial make sure to comment and give some love.

Getting Started with Vite 2

Alvaro Saburido — Wed, 03 Mar 2021 16:44:08 +0000

Vite ⚡️ is the Eminem of frontend tooling.

Why? Because is crazy fast and delivers well.

In mid-February Evan You announced the release of the latest iteration of Vite

Announcing Vite 2.0

Evan You ・ Feb 16 '21

#javascript #webdev #vite

Vite (French word for "fast", pronounced /vit/) is a new kind of build tool for front-end web development. Think a pre-configured dev server + bundler combo, but leaner and faster. It leverages browser's native ES modules support and tools written in compile-to-native languages like esbuild to deliver a snappy and modern development experience.

With this tutorial, you're going to learn how to set up a Vue3 app with Vite in no-time, some cool plugins to improve the DX (Developer Experience), and more importantly, understand how does it work and why is so fast.

Scaffolding your first Vite project

Open your favorite terminal and run:

npm init @vitejs/app

Or if you prefer Yarn:

yarn create @vitejs/app

And follow the prompts:

Vite supports multiple templates presets such as:

vanilla
vue
vue-ts
react
react-ts
preact
preact-ts
lit-element
lit-element-ts

You can also scaffold with one command via additional command-line options for name and template. In this tutorial, we're going to build a Vue project.

yarn create @vitejs/app awesomely-fast --template vue

And let the magic be... ok it's already installed.

Structure of a Vite project

The first thing you probably have noticed is that index.html is no longer in the public folder but in the root directory.

That's because Vite treats the index.html as source code and part of the module graph. Similar to static HTTP servers, Vite has the concept of a "root directory" from which your files are served from.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

The rest of the structure it's pretty standard inside an src folder with an App.vue as your root component and a main.js to bootstrap your Vue App.

Dev server

Your package.json will come with three (3) built-in scripts:

 "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview"
  },

Go ahead and run yarn dev.

Exactly, around ~344ms to cold start a dev server. To give you an idea of how fast it is, using vue-cli the dev server would take around a second and a half.

When cold-starting the dev server, a bundler-based (webpack) setup has to eagerly crawl and build your entire application before it can be served.

Vite improves the dev server start time by first dividing the modules in an application into two categories

dependencies: Essentially plain javascript that would not change during development
source code: Yeap, your code, all your Vue components, and CSS that you often edit.

Vite serves source code over native ESM. This is essentially letting the browser taking over part of the job of a bundler

Do you remember the <script type="module" /> tag at the beginning? That's is using native ESM approach.

How does it work?

Let's have a look at the Network Tab of a Vite app vs vue-cli (webpack)

vue-cli

In the image above, vue-cli bundles the code into two main chunks:

app.js which contains the bundle of your code
chunk-vendors.js containing all the code from third-parties.

Around 2.4 MB in 2 requests with a total load time of 301ms

Bundle-based dev-servers take the job of packaging all modules and different files into one static bundle that is served on mostly all the cases an express server. Similar to this image

The more complexity inside the box, the more time will need the server to start.

Now let's compare that with the Vite one.

Vite dev-server

As you can see, Vite loads every file (.vue, .js) as a module, been able of doing it parallel, and reduce the total load time to around ~190ms.

Notice the size transferred, it didn't reach 1 MB compared to the 2.4MB of the bundle-based.

This speed is because native ESM transfers part of the responsibility of the job of a bundler to the browser itself. It basically transforms and serves code on-demand while the browser requests it via HTTP.

This comparison, of course, is done with a small app with one (1) component, I suggest you try the same with a bigger/complex one and you will be amazed by the results.

The struggle of slow updates

Before Vite, as your application evolve and start holding hundreds of components, It would incrementally increase the time to pack them into a bundle, that's why many bundlers run the building on memory and others use Hot module Replacement (HMR) to increase the speed between updates.

In Vite, HMR is performed over native ESM. When a file is edited, Vite only needs to precisely invalidate the chain between the edited module and its closest HMR boundary (most of the time only the module itself), making HMR updates consistently fast regardless of the size of your application.

That means that no matter how big is your app, it will not affect the speed when serving.

If you want to see a real comparison test of speed between bundle-based vs Vite check this article I wrote earlier

Article No Longer Available

What, no loaders for styling?

One of the things that impressed me the most is that Vite does provide built-in support for .scss, .sass, .less, .styl, and .stylus files.

There is no need to install loaders or Vite-specific plugins for them, but the corresponding pre-processor itself must be installed:

# .scss and .sass
yarn add -D sass

# .less
yarn add -D less

# .styl and .stylus
yarn add -D stylus

That way you can concentrate on plugins that really matter, like the ones we're gonna check in the next section

Plugins, plugins, plugins

To enhance your Vite app, here is a list of my top plugins available:

@vitejs/plugin-vue

This is an official plugin packaged inside the Vite repo to support Vue3 SFC components.

It makes sense is optional due to the fact that Vite is framework agnostic.

To use it, add the following to your vite.config.js

// vite.config.js
import vue from '@vitejs/plugin-vue'

export default {
  plugins: [vue()]
}

antfu/vite-plugin-pwa

vite-pwa / vite-plugin-pwa

Zero-config PWA for Vite

Provides quick zero-config for PWA support

npm i vite-plugin-pwa -D 

yarn add vite-plugin-pwa -D

Add it to vite.config.js

// vite.config.js
import { VitePWA } from 'vite-plugin-pwa'

export default {
  plugins: [
    VitePWA({
      manifest: {
       // content of manifest
      },
      workbox: {
      // workbox options for generateSW
      }
    })
  ]
}

antfu/vite-plugin-md

antfu / vite-plugin-md

Markdown with Vue for Vite

This loader for markdown allows you to use Markdown as Vue components and use your Vue components in Markdown files

Install

npm i vite-plugin-md -D 

yarn add vite-plugin-md -D

Add it to vite.config.js

// vite.config.js
import Vue from '@vitejs/plugin-vue'
import Markdown from 'vite-plugin-md'

export default {
  plugins: [
    Vue({
      include: [/\.vue$/, /\.md$/], // <--
    }),
    Markdown()
  ],
}

antfu/vite-plugin-icons

unplugin / unplugin-icons

🤹 Access thousands of icons as components on-demand universally.

Access thousands of icons as Vue components in Vite

90+ iconsets powered by Iconify
Browser the icons

Install

npm i vite-plugin-icons @iconify/json -D 

yarn add vite-plugin-icons @iconify/json -D

Add it to vite.config.js

// vite.config.js
import Vue from '@vitejs/plugin-vue'
import Icons from 'vite-plugin-icons'

export default {
  plugins: [
    Vue(),
    Icons()
  ],
}

<script setup>
import IconAccessibility from '/@vite-icons/carbon/accessibility'
import IconAccountBox from '/@vite-icons/mdi/account-box'
</script>

<template>
  <icon-accessibility/>
  <icon-account-box style="font-size: 2em; color: red"/>
</template>

It also allows auto-importing

Nuxt/vite 😍

What about using Vite with Nuxt? That's cover.

nuxt / vite

⚡ Vite Experience with Nuxt 2

Install nuxt-vite: (nuxt >= 2.15.0 is required)

yarn add --dev nuxt-vite
# OR
npm i -D nuxt-vite

Add to buildModules:

// nuxt.config
export default {
  buildModules: [
    'nuxt-vite'
  ]
}

antfu/vite-plugin-components

Tired of importing manually your components? Say no more.

unplugin / unplugin-vue-components

📲 On-demand components auto importing for Vue

npm i vite-plugin-components -D 
#OR 
yarn add vite-plugin-components -D

Add it to vite.config.js

// vite.config.js
import Vue from '@vitejs/plugin-vue'
import ViteComponents from 'vite-plugin-components'

export default {
  plugins: [
    Vue(),
    ViteComponents()
  ],
};

That's all.

Tailwind on-demand with windicss

windicss / vite-plugin-windicss

🍃 Windi CSS for Vite ⚡️

npm i vite-plugin-windicss -D 
#OR 
yarn add vite-plugin-windicss -D

// vite.config.js
import WindiCSS from 'vite-plugin-windicss'

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

// main.js
import 'windi.css'

That's all. Build your app just like what you would do with Tailwind CSS, but much faster! ⚡️

If you want to check more plugins they are all listed here

vitejs / awesome-vite

⚡️ A curated list of awesome things related to Vite.js

Awesome Vite.js

A curated list of awesome things related to Vite.js

Use the "Table of Contents" menu on the top-right corner to explore the list.

Resources

Official Resources

Get Started

create-vite - Scaffolding Your First Vite Project.
create-vitawind - Scaffolding for TailwindCSS project.
create-electron-vite - Scaffolding Your Electron + Vite Project.
create-vite-app - Scaffolding Your Out Of The Box Vite Project.
create-nx-workspace - Scaffolding a Nx + React + Vite + Vitest.
bati - Scaffolding a Vike project.
create-awesome-node-app - Scaffolding your project choosing between different templates.

Templates

Vanilla

vite-vanilla-ts-lib-starter - Starter for library (CJS, ESM, IIFE) with TypeScript, ESLint, Stylelint, Prettier, Jest, Husky + lint-staged.
vite-tailwind-nojs-starter - NoJS Tailwind CSS starter template.
vite-tailwind-stimulus-starter - Starter template for Tailwind CSS and Stimulus controllers.
vite-phaser-ts - Starter template with Phaser and Typescript.
vite-tinybase - Starter…

View on GitHub

Are you ready to step up with your frontend tooling?

Vite 2 - A speed comparison in Vue

Alvaro Saburido — Wed, 03 Mar 2021 15:22:56 +0000

Following my latest post about Vite ⚡️ let's actually do some tests to demonstrate how fast is against standard bundler-based setups.

These tests are done in a 2016'S MacBook Pro with 2,7 GHz Quad-Core Intel Core i7 and 16GB 2133 MHz RAM

Speed comparison against Vue-cli (webpack)

To get a notion of how fast is Vite against more standard frontend tooling, in the case of vue we're going to compare it with vue-cli that uses webpack.

✋🏻 These tests are based on the basic project available after scaffolding with each tool containing only one (1) view and one (1) component. Results will improve significantly if the same tests are replicated to larger codebases.

Scaffolding

From creating a new vue project via command:
yarn create @vitejs/app <project-name> took only ~5.95s against ~28s of vue create <project-name>.

	vue-cli	vite	🏆
Scaffolding	~28s	~5.95s

Dev server

When cold-starting the dev server, Vite was ridiculously fast 😱 with approx ~370ms against 1.64s of vue-cli

	vue-cli	vite	🏆
Dev Server	~1.64s	~0.37s

Updating a component

I must say testing this in a small project is barely observable, to properly test this scenario bigger and more complex projects should be used to really reflect how Vite Hot Module Replacement (HMR) over native ESM against performs better than bundler-based where the update speed degrades linearly with the size of the app.

If someone reading this article has already a test case with a complex app that would be awesome.

	vue-cli	vite	🏆
Update	~0.349s	<0.3s

Building

What about building for production? Shipping unbundled ESM in production is still inefficient. For the time being Rollup is used in Vite for building, so that it will be a Rollop vs. Webpack kinda thing.

Even tho, Vite smashes the competition by building the sample project in ~2.88s against nearly 11.30s from the webpack based.

	vue-cli	vite	🏆
Build	~11.27s	~2.88s

Total Results

Our winner is Vite by a landslide 🎉. I hope this comparison helps you decide to start using Vite, if so, let me know in the comments 😄

	vue-cli	vite
Scaffolding	~28s	~5.95s
Dev Server	~1.64s	~0.37s
Update	~0.349s	<0.3s
Build	~11.27s	~2.88s

CSS aspect-ratio for the win

Alvaro Saburido — Thu, 18 Feb 2021 10:12:56 +0000

Update 😎: If you like to see this tutorial in video format, here is the link!.

So a few days ago a colleague of mine published in the slack from my company that a new CSS property was defined in the CSS Box Sizing Module Level 4 specification. Is still a Working Draft, so some things could change but are supported already by Chrome and Firefox under an experimental flag.

Yeah, I'm talking about my dream come true, aspect-ratio is in progress and is gaining a lot of momentum.

To understand why is this such a big deal, let's cover first what aspect-ratio means in terms of design and what CSS hacks were used until now.

Aspect ratio

Two images with different sizes can share the same aspect ratio, in this case 3:4 - Image Photo by Chris Lee on Unsplash

Is a common term used in photography and video where the dimensions of any media resource are expressed as two integers and a colon, it can be width:height or x:y.

You can find these values everywhere:

The most common values for photography are 4:3 and 3:2.
Instagram Square pics use a 1:1, portraits are 4:5 and landscapes 1.91:1
OG Images for social media are 1.91:1
Youtube videos and thumbnails enjoy a widescreen of 16:9
If you are reading this from a 15'' MacBook Pro your retina display is about 16:10

Same image with different aspect ratios, 2:3 on the left and 1:1 on the right- Image Photo by Tim Schmidbauer on Unsplash

Well, why this should concern you as a Frontend dev? Should, a lot actually.

Several times you will find the situation where a media resource needs to be represented through UI Elements, a perfect example would be a card with a Youtube video, or a grid showing your latest articles on your webpage.

If we lived in a world where all devices had the same screen (what a crappy world), then we could easily set width and height to a fixed value. But we leave in a responsive world, maintaining aspect ratio has been increasingly important for web developers, especially as image dimensions differ from element sizes depending on the available space.

Creating intrinsic placeholder containers for images, videos, and embeds and preventing cumulative layout shift in fluid environments is a must.

So.... how it's was done before?

The old-good-hack: using padding-top

This hack is written in every experienced frontend dev's handbook, even when is a little bit unintuitive, it actually works and is a well-accepted cross-browser friendly solution.

padding-top is based on the parent element's width, so if you had an element that is 640px and you set a padding-top: 100% wouldn't that be equal to 640px?

A perfect square of 1:1 aspect ratio. 🤯

Want a youtube video aspect ratio 16:9? Just use The Rule of three:

9 * 100 / 16 and your padding-top should be 56.25%

Here is an example of using this hack (in comparison to not using it)

CSS aspect-ratio for the win

It's time for magic.

.my-thumbnail {
  aspect-ratio: 16 / 9;
}

Just drop aspect-ratio on your selector alone and it will calculate a height based on the auto width.

BAM!! No more hacks needed.

I create more examples in this Pen:

Can I use?

Of course, the hype is real until you enter this page and you check that you cannot use it yet in most browsers, only supported in Chromium, Safari Technology Preview, and Firefox Nightly for now.

I hope you learned a lot as I did, let me know your thoughts in the comments.

Happy coding!

Create modals with Vue3 Teleport + TailwindCSS

Alvaro Saburido — Wed, 10 Feb 2021 21:57:28 +0000

Vue 3 brought us a lot of amazing new features, but one of my favorites still is the Teleport.

Why? because the <teleport /> tag allows you to move elements from one place to another in a Vue application. Think of it as a portal to move between dimensions 🦄:

Actually, it was called like this in earlier stages of Vue 3 but eventually, the Vue Core team decided to change it.

Vue normally encourages building UIs by encapsulating UI related behaviors scoped inside components. However, sometimes makes sense that certain part of the component template to live somewhere else in the DOM.

A perfect example of this is a full-screen modal, it is a common scenario that we want to keep the modal's logic to live within the component (closing the modal, clicking an action) but we want to place it "physically" somewhere else, like at body level without having to recur to tricky CSS.

In this tutorial, we're going to cover step by step how to implement a modal dialog with this feature and styling it with my favorite utility framework TailwindCSS along with:

Slots
Composition API

However, I will assume that you already have a certain level on Vue because I will not cover any basics.

If you prefer to check this tutorial in a video, here is it:

Prerequisites

Before starting, scaffold a simple Vue3 app with your preferred method (vue-cli, Vite).

In my case, I will create it using Vite ⚡️ by running:



yarn create @vitejs/app modals-n-portals --template vue

Afterward, install TailwindCSS



npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

In case you run into trouble, you may need to use the PostCSS 7 compatibility build instead. You can check the process here

Next, generate your tailwind.config.js and postcss.config.js files with:



npx tailwindcss init -p

To finish add the following into your main css file in the project



@tailwind base;
@tailwind components;
@tailwind utilities;

Remember to import the css file into your main.js.

Now we're ready to start.

What is Teleport

Is a wrapper component <teleport /> that the user can render a piece of a component in a different place in the DOM tree, even if this place is not in your app's or component's scope.

It takes a to attribute that specifies where in the DOM you want to teleport an element to. This destination must be somewhere outside the component tree to avoid any kind of interference with other application’s UI components.



<teleport to="body">
  <!-- Whatever you want to teleport -->
</teleport>

Create the Modal component

Create a ModalDialog.vue inside of the components directory and start filling the template



<template>
  <teleport to="body">
    <div
        class="w-1/2 bg-white rounded-lg text-left overflow-hidden shadow-xl"
        role="dialog"
        ref="modal"
        aria-modal="true"
        aria-labelledby="modal-headline"
    >
       Awiwi
    </div>
  </teleport>
</template>

<script>
...

So we include an element with role="dialog" inside the <teleport to="body"> which will send our modal to the main body.

From the style perspective,w-1/2 will set the width of the modal to a 50% bg-white rounded-lg will give us a nice white rounded dialog and shadow-xl will give it a little bit of depth.

Now add this component to your App.vue



<template>
  <ModalDialog />
</template>

<script>
import ModalDialog from './components/ModalDialog.vue';

const components = {
  ModalDialog,
};
export default {
  name: 'App',
  components,
};
</script>

<style></style>

Well, that doesn't look very much like a modal (yet), but the desired outcome is there, if you look closer to the DOM in the inspector, the ModalDialog template has been "teleported" to the very end of the body tag (with the green background) even if it's logic was defined inside the App (with the yellow background)

Make it look like a modal

Logic is in place, now let's make it pretty.

At the moment we just have a div element that works as the modal, but to achieve the correct UX we need to place it on top of a full-screen, fixed backdrop with blackish reduced opacity. The modal also needs to be centered horizontally and have a proper position (around 25% to 50% from the top of the browser)

This is pretty simple to achieve with some wrappers and TailwindCSS magic, to our current component template, surround our modal element with the following:



<template>
  <teleport to="body">
    <div
      ref="modal-backdrop"
      class="fixed z-10 inset-0 overflow-y-auto bg-black bg-opacity-50"
    >
      <div
        class="flex items-start justify-center min-h-screen pt-24 text-center"
      >
        <div
          class="bg-white rounded-lg text-left overflow-hidden shadow-xl p-8 w-1/2"
          role="dialog"
          ref="modal"
          aria-modal="true"
          aria-labelledby="modal-headline"
        >
          Awiwi
        </div>
      </div>
    </div>
  </teleport>
</template>

The modal-backdrop will fix our component's position relative to the browser window and the child div containing the flex class will handle the centering and padding from the top. Now, our modal should look something like this:

Ok, now it's more likely 😛.

Adding props to the Modal

Of course, we wouldn't like a Modal that sticks visible all the time over or web/app content, so let's add some logic to make it toggleable.



<script>
const props = {
  show: {
    type: Boolean,
    default: false,
  },
};
export default {
  name: 'ModalDialog',
  props,
  setup() {
    // Code goes here
  }
};
</script>

Since it's considered bad practice to modify props directly and we do want to toggle our modal from inside the component (clicking a close button or clicking outside of the modal to close it) we should declare a variable using ref to show the modal inside the setup method and update it whenever the prop changes using watch



import { ref, watch } from 'vue';

setup(props) {
  const showModal = ref(false);

  watch(
    () => props.show,
    show => {
      showModal.value = show;
    },
  );

  return {
    showModal,
  };
},

Right after, add a v-if="showModal" to the div[ref="modal-backdrop"].

Jump on your App.vue and create a Button for toggling the modal. In case you're lazy, just copy this snippet 😜



<template>
  <div class="page p-8">
    <button
      type="button"
      @click="showModal = !showModal"
      class="mx-auto w-full flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
    >
      Open Modal
    </button>
    <ModalDialog :show="showModal" />
  </div>
</template>

<script>
import ModalDialog from './components/ModalDialog.vue';
import { ref } from 'vue';

const components = {
  ModalDialog,
};
export default {
  name: 'App',
  components,
  setup() {
    const showModal = ref(false);
    return {
      showModal,
    };
  },
};
</script>

Animate it

Now that we have our modal working (kinda), you're probably triggered by the fact that the element appears just like that, without any transition or animation.

To smooth things up, let's combine Vue's <transition /> wrapper with the magic of TailwindCSS.

First, surround the modal-backdrop with the following code:



 <transition
      enter-active-class="transition ease-out duration-200 transform"
      enter-from-class="opacity-0"
      enter-to-class="opacity-100"
      leave-active-class="transition ease-in duration-200 transform"
      leave-from-class="opacity-100"
      leave-to-class="opacity-0">
  <div
     ref="modal-backdrop"
     class="fixed z-10 inset-0 overflow-y-auto bg-black bg-opacity-50"
     v-show="showModal">
     ...
  </div>
</transition>

These classes will add a smooth opacity fade In effect to the backdrop, notice that we also changed the v-if for v-show.

Do the same for the modal but this time, we will apply different classes to achieve a more elegant transition using translation and scaling.



<transition
  enter-active-class="transition ease-out duration-300 transform "
  enter-from-class="opacity-0 translate-y-10 scale-95"
  enter-to-class="opacity-100 translate-y-0 scale-100"
  leave-active-class="ease-in duration-200"
  leave-from-class="opacity-100 translate-y-0 scale-100"
  leave-to-class="opacity-0 translate-y-10 translate-y-0 scale-95"
>
  <div
    class="bg-white rounded-lg text-left overflow-hidden shadow-xl p-8 w-1/2"
    role="dialog"
    ref="modal"
    aria-modal="true"
    v-show="showModal"
    aria-labelledby="modal-headline"
  >
    Awiwi
  </div>
</transition>

🤤 🤤 🤤 🤤

Using slots for the modal content

Now that our modal works like charm, let's add the possibility to pass the content through Vue slots.



<div
    class="bg-white rounded-lg text-left overflow-hidden shadow-xl p-8 w-1/2"
    role="dialog"
    ref="modal"
    aria-modal="true"
    v-show="showModal"
    aria-labelledby="modal-headline"
>
    <slot>I'm empty inside</slot>
</div>

So now we can pass anything we want from the parent component using our ModalDialog component:



<ModalDialog :show="showModal">
    <p class="mb-4">Gokuu is...</p>
    <img src="https://i.gifer.com/QjMQ.gif" />
</ModalDialog>

Voilá

Close logic

To this point maybe the article is getting too long, but it worth it, I promise, so stick with me we're only missing one step.

Let's add some closure (Pi dun tsss), now seriously inside of the modal let's had a flat button with a close icon inside.

If you don't want to complicate yourselves with Fonts/SVGs or icon components, if you are using Vite ⚡️, there is this awesome plugin based on Iconify you can use, it's ridiculously easy.

Install the plugin and peer dependency @iconify/json



npm i -D vite-plugin-icons @iconify/json

Add it to vite.config.js



// vite.config.js
import Vue from '@vitejs/plugin-vue'
import Icons from 'vite-plugin-icons'

export default {
  plugins: [
    Vue(),
    Icons()
  ],
}

So back to where we were:



<template>
  ...
  <div
    class="relative bg-white rounded-lg text-left overflow-hidden shadow-xl p-8 w-1/2"
    role="dialog"
    ref="modal"
    aria-modal="true"
    v-show="showModal"
    aria-labelledby="modal-headline"
  >
    <button class="absolute top-4 right-4">
      <icon-close @click="closeModal" />
    </button>
    <slot>I'm empty inside</slot>
  </div>
  ...
</template>

<script>
  import { ref, watch } from "vue";

  import IconClose from "/@vite-icons/mdi/close.vue";
  const props = {
    show: {
      type: Boolean,
      default: false,
    },
  };
  export default {
    name: "ModalDialog",
    props,
    components,
    setup(props) {
      const showModal = ref(false);

      function closeModal() {
        showModal.value = false;
      }

      watch(
        () => props.show,
        (show) => {
          showModal.value = show;
        }
      );

      return {
        closeModal,
        showModal,
      };
    },
  };
</script>

The circle is finally complete.

Bonus

In case you got this far, I got a little bonus for you, let's use the composition API to close our ModalDialog whenever we click outside (on the backdrop).

Create a file under src/composables/useClickOutside.js with the following code, 😅 trust me, it works even if looks like Chinese:



// Same implementation as https://github.com/vueuse/vueuse/blob/main/packages/core/onClickOutside/index.ts

import { watch, unref, onUnmounted } from 'vue';

const EVENTS = ['mousedown', 'touchstart', 'pointerdown'];

function unrefElement(elRef) {
  return unref(elRef)?.$el ?? unref(elRef);
}

function useEventListener(...args) {
  let target;
  let event;
  let listener;
  let options;

  [target, event, listener, options] = args;

  if (!target) return;

  let cleanup = () => {};

  watch(
    () => unref(target),
    el => {
      cleanup();
      if (!el) return;

      el.addEventListener(event, listener, options);

      cleanup = () => {
        el.removeEventListener(event, listener, options);
        cleanup = noop;
      };
    },
    { immediate: true },
  );

  onUnmounted(stop);

  return stop;
}

export default function useClickOutside() {
  function onClickOutside(target, callback) {
    const listener = event => {
      const el = unrefElement(target);
      if (!el) return;

      if (el === event.target || event.composedPath().includes(el)) return;

      callback(event);
    };

    let disposables = EVENTS.map(event =>
      useEventListener(window, event, listener, { passive: true }),
    );

    const stop = () => {
      disposables.forEach(stop => stop());
      disposables = [];
    };

    onUnmounted(stop);

    return stop;
  }
  return {
    onClickOutside,
  };
}

All you need to know is how to use this composable function, so in our ModalDialogComponent add the following code on the setup method:



setup(props) {
    ...
    const modal = ref(null);
    const { onClickOutside } = useClickOutside();

    ...

    onClickOutside(modal, () => {
        if (showModal.value === true) {
        closeModal();
        }
    });

    return {
        ...
        modal,
    };
}

Using template ref (on div[ref="modal") we essentially pass the target element and a callback to close the modal. The composition function adds event listeners to the window (mousedown, touchstart, pointerdown) which essentially controls if you clicked on the target (modal) element or not

Congratulations, you now have the latest state of the art modal using Vue3 Teleport and TailwindCSS

alvarosabu / alvaro-dev-labs-

Alvaro Dev Labs ⚡️

Playing ground for my articles and my YouTube Channel

Install

yarn

Usage

Branch names has the same (or similar) title as the articles and youtube videos.

yarn dev

View on GitHub

As always, feel free to contact me in the comments section. Happy to answer. Cheers 🍻

Using script Setup for Vue 3 SFCs

Alvaro Saburido — Wed, 03 Feb 2021 17:33:15 +0000

A few days ago I remembered a cool feature that was part of the RFCs that made it into Vue 3 and the composition API final releases when Evan You twitted this:

// Detect dark theme var iframe = document.getElementById('tweet-1353796900965785602-541'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1353796900965785602&theme=dark" }

So I decided to share it in case you also didn't catch up with this nice feature at the time it was announced.

What is `<script setup>`?

First, let's talk about how we normally implement Single Files components (SFCs) when using the Composition API


<template>
  <button class="btn" @click="onClick">{{label}}</button>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const label = ref(`I'm a very dangerous button`);

    function onClick() {
      label.value = `Don't touch me`
    }

    return {
      label,
      onClick
    }
  } 
}
</script>

<style>
.btn {
  outline: none;
  border: none;
  background: #5EDCAE;
  padding: 15px;
  border-radius: 5px;
  color: white;
  font-weight:600;
}
</style>

Here we have a very dangerous button that is ready to kick some as** at the best Cobra Kai style.

Sorry, I really liked the GIF 😅. As you see in the code above we are using the setup method to define the label and a default function when the user clicks our component and we exporting them into the <template /> to be used.

Very often setup is the only option being used when authoring components using the Composition API and yes, one of most often complaints about it is the need to repeat all the bindings that need to be exposed to the render context.

This is where <script setup /> comes to town, with this attribute a new compile step is included where the code runs in the context of the setup() function of the component. Applying that to our Dangerous Button:

<template>
  <button class="btn" @click="onClick">{{label}}</button>
</template>

<script setup>
import { ref } from 'vue';
export const label = ref(`I'm a very dangerous button`);

function onClick() {
  label.value = `Don't touch me`
}
</script>

Looks nicer right? Of course, for such a small component, it's difficult to see the benefit of this, but when components get bigger and bigger, it's appreciated.

Using `setup()` arguments

What happens if we need to access the props or the context? Just add them as the value of the setup attribute

<template>
  <button class="btn" @click="onClick">{{label}}</button>
</template>

<script setup="props, {emit}">
import { ref } from 'vue';
export const label = ref(`I'm a very dangerous button`);

export function onClick() {
  label.value = `Don't touch me`;
  emit('No Mercy');
}
</script>

Declaring props or additional options

One caveat of <script setup> is that removes the ability to declare other component options, like props. This can be easily solved by treating the default export as additional options like this:

<script setup="props, {emit}">
import { ref } from 'vue';

export default {
  props: {
     color: String,
     default: 'primary' 
  }
}

export const label = ref(`I'm a very dangerous button`);

export function onClick() {
  label.value = `Don't touch me`;
  emit('No Mercy');
}

export const buttonClass = computed(() => `btn-${props.color}`);

</script

Typescript

Would it work with Typescript? It should. To type setup arguments simply declare them

<script setup="props" lang="ts">
import { ref } from 'vue';

declare const props: {
   color: String
}

export const label = ref(`I'm a very dangerous button`);

export function onClick() {
  label.value = `Don't touch me`;
  emit('No Mercy');
}

export const buttonClass = computed(() => `btn-${props.color}`);

</script

Before you go

It's important to highlight that this approach relies on the context of an SFC. script setup> cannot be used with the src attribute if the logic is moved to an external .js or .ts file.

For the sake of safety, make sure you click that 🦄 or ❤️ so we don't make our Dangerous button angrier than it currently is 😅. See ya in the comments!

How to create a Universal Library for Vue 2 & 3

Alvaro Saburido — Mon, 25 Jan 2021 15:34:00 +0000

As you probably know by now, last September Evan You announced the new version of Vue (Vue 3.0 or "One Piece" for friends) during the Vue.js Global Event - Official release here.

The hype for upgrading code to the latest version of Vue exploded and everyone (including me) was eager to start. But they are breaking changes, especially on the global API, forcing library/plugin authors to migrate their code to support the new version and the Composition API. If you want to understand better why I wrote an article on how to do the migration from 2.x to 3.x here - How to migrate your library from Vue 2.x to Vue 3.x

As an author of a Vue library, I have to say that the migration wasn't an easy job, imitating what major libraries did: separating the support for each the targeting version in separate branches and tags (main for vue 2.x and next for vue 3.x) or even having a separate repo to ensure better code isolation.

As Vue.js core member @antfu (Anthony Fu) explains in this post:

The drawback of this is that you will need to maintain two codebases that double your workload. For small scale libraries or new libraries that want to support both versions, doing bugfix or feature supplements twice is just no ideal. I would not recommend using this approach at the very beginning of your projects.

It's possible to achieve this by using a developing tool that the same @antfu created called Vue-demi.

So if you are interested to learn how to create a universal library/plugin for both versions of Vue, this article is for you.

Create base setup

Let's begin by creating a new project using vue-cli prompt.

vue create vue-universal-lib

Be sure you select the 3.x version for Vue, and the rest I leave it to your preferences, but I strongly suggest you use the same options as I describe here to be on the same page:

Options selected:

Babel
Typescript
Linter
Use class-style component syntax No
Use Babel alongside TypeScript Yes
Pick a linter: ESLint + Prettier

After some seconds we will have a basic structure to start with. You probably need to get rid of some stuff like the App.vue and main.ts since we mainly are going to work with an index.ts file.

Find a purpose

Sounds epic right? Fun apart find a necessity, some functionality often used in Web development that you want to implement in Vue and make it reusable, something that you think will bring value being a library/plugin.

For this tutorial sake, we will create a simple library that allows you to animate numbers like a counter, similar to this:

This type of component is often used in landing pages to show KPIs.

Hands dirty

First of all, let's create the counter-number component under src/components/CounterNumber.ts using defineComponent.

import { ref, defineComponent, h } from 'vue';

export const CounterNumber = defineComponent({
  name: 'Awesome',
  props,
  setup(props, ctx) {
    const value = ref(640);

    return () =>
      h(
        'span',
        {
          class: 'counter-number',
        },
        value,
      );
  },
});

For the moment let's leave it as a presentational component without the animation, later we will add the functionality through a composable function to take advantage of Vue3's Composition API.

You might also notice there is no template for the component in here, the setup function returns a render function with a <span> element holding the counter value. That's intended and will be explained in the Caveates section of the post.

For demo purposes leave out a main.ts and the App.vue to test the new component using npm serve.

Plugin installation

For creating the plugin itself create a src/index.ts:

import { App, inject, InjectionKey } from 'vue';
import { CounterNumber } from './components/CounterNumber';

export interface VueCounterOptions {
  theme: string;
}

export interface VueCounterPlugin {
  options?: VueCounterOptions;
  install(app: App): void;
}

export const VueCounterPluginSymbol: InjectionKey<VueCounterPlugin> = Symbol();

export function VueCounterPlugin(): VueCounterPlugin {
  const VueCounterPlugin = inject(VueCounterPluginSymbol);
  if (!VueCounterPlugin) throw new Error('No VueCounterPlugin provided!!!');

  return VueCounterPlugin;
}

export function createVueCounterPlugin(
  options?: VueCounterOptions,
): VueCounterPlugin {
  const plugin: VueCounterPlugin = {
    options,
    install(app: App) {
      app.component('vue-counter', CounterNumber);
      app.provide(VueCounterPluginSymbol, this);
    },
  };

  return plugin;
}

Let's break this down into parts, the function createVueCounterPlugin will allow you to install the plugin via the install method when using createApp.use() in your app.

This will add to the app instance all the components, properties of your library like you see above with app.component('vue-counter', CounterNumber);

To get most of the Composition API and be able to inject into your library components things like options or utilities we create a Plugin Symbol to be used along with app.provide in the install method where we pass the createVueCounterPlugin itself as a parameter. This might look complicated at the moment, but it's the standard way:


// index.ts

...
export const VueCounterPluginSymbol: InjectionKey<VueCounterPlugin> = Symbol();

export function VueCounterPlugin(): VueCounterPlugin {
  const VueCounterPlugin = inject(VueCounterPluginSymbol);
  if (!VueCounterPlugin) throw new Error('No VueCounterPlugin provided!!!');

  return VueCounterPlugin;
}

...

To install the plugin and test it, go to your src/main.ts:

import { createApp } from 'vue';
import App from './App.vue';
import './assets/styles/main.css';

import { createVueCounterPlugin } from './';

const VueCounterPlugin = createVueCounterPlugin();

createApp(App).use(VueCounterPlugin).mount('#app');

If you like to pass options to your plugin you can do it like this

const VueCounterPlugin = createVueCounterPlugin({ theme: 'light' });

The magic behind what we did is that using app.provide in the plugin install method is that we can inject the plugin options as a dependency later.

Now let's add the CounterNumber component into the src/App.vue.

// App.vue

<template>
  <h2 class="font-bold text-2xl mb-8 text-gray-600">
    Vue Counter animation
  </h2>
  <div
    class="card bg-gray-100 rounded-xl p-8 auto shadow-lg mx-auto w-1/3 text-indigo-400 font-bold text-xl"
  >
    <vue-counter />
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  name: 'App',
});
</script>

If you are curious about the utility classes I used here, is the awesome TailwindCSS which I love for doing quick prototypes. You can install it also by following this guide. Just make sure you add those dependencies as devDependencies to your package.json or they will be included in your library bundle.

Let's see how it looks on the browser with npm run serve

Animation and composition

Looks beautiful, but needs more magic. Let's add the easing animation for the counter. To achieve a smooth animation, we will be using a library called anime.js, which is really lightweight and offers and plain simple API.

We could add the logic directly on the CounterNumber component, but since we talked before about Composition API let's use it for this purpose.

Create a useCounter.ts file under src/composables and export a function called useCounter like this:

import { ref } from 'vue';

import anime from 'animejs/lib/anime.es.js';

export function useCounter() {
  const count = ref(0);
  const counter = {
    value: 0,
  };

  anime({
    targets: counter,
    duration: 2000, // 2000ms
    value: 640,
    easing: 'easeOutQuad',
    update: () => {
      count.value = Math.round(counter.value);
    },
  });

  return {
    count,
  };
}

We import a factory function called 'anime' from 'animejs/lib/anime.es.js' and we pass a target (in this case an obj containing a ref with the value to be animated).

The anime() function accepts a lot of parameters to customize the behavior of the animation such as duration, delay, easing, and callbacks like an update that triggers every time the animation updates the target object. The interesting thing is that you can pass as property the same property you want to animate, in this case value, in the example above will go from 0 to 640. For more info about the animejs API check the docs

Go back to your CounterNumber.ts component and get the use the count.value inside the span like this:

export const CounterNumber = defineComponent({
  name: 'Awesome',
  props,
  setup(props, ctx) {
    const { count } = useCounter();

    return () =>
      h(
        'span',
        {
          class: 'counter-number',
        },
        count.value,
      );
  },
});

Now go back to the browser and refresh to see how the counter goes from 0 to 640 in 2 seconds.

Make it customizable

At the moment, all values are hardcoded, but since we are doing a library, these parameters for the animation should be customizable and therefore passed as props to the component and down to the composition function.

First, let's add some props that make sense:


// src/components/Counternumber

const props = {
  from: {
    type: [Number, String],
    default: 0,
  },
  to: {
    type: [Number, String],
    required: true,
    default: 0,
  },
  duration: {
    type: Number,
    default: 1000, // Duration of animation in ms
  },
  easing: {
    type: String,
    default: 'easeInOutQuad',
  },
  delay: {
    type: Number,
    default: 0, // Delay the animation in ms
  },
};

export const CounterNumber = defineComponent({
  name: 'Awesome',
  props,
  setup(props, ctx) {
    const { count } = useCounter(props);
...
  },
});

Make sure you pass the props to the useCounter(props) function;

Go to App.vue and create some variables to pass to the component as props:

<template>
  <h2 class="font-bold text-2xl mb-8 text-gray-600">Vue Counter animation</h2>
  <div
    class="card bg-gray-100 rounded-xl p-8 auto shadow-lg mx-auto w-1/3 text-indigo-400 font-bold text-xl"
  >
    <vue-counter :from="0" :to="640" :duration="3000" :delay="2000" />
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  name: 'App',,
});
</script>

Finally, go back to useCounter.ts and pass the props to the anime instance

import { ref } from 'vue';

import anime from 'animejs/lib/anime.es.js';

export function useCounter(props: any, emit: any) {
  const count = ref(0);
  const counter = {
    value: props.from,
  };

  anime({
    targets: counter,
    duration: props.duration,
    value: props.to,
    delay: props.delay,
    easing: props.easing || 'linear',
    update: () => {
      count.value = Math.round(counter.value);
    },
  });

  return {
    count,
  };
}

Of course, we would need to add more code to make it create a new instance of the anime object every time a prop change, but for the scope of the article is more than enough.

Make it universal

So great, we have our awesome library ready, at the moment, is only usable on a project with for Vue 3, how can we achieve an isomorphic installation?

That's where vue-demi comes to the rescue.

npm i vue-demi
# or
yarn add vue-demi

Add vue and @vue/composition-api to your plugin's peer dependencies to specify what versions you support.

// package.json

{
  "dependencies": {
    "vue-demi": "latest"
  },
  "peerDependencies": {
    "@vue/composition-api": "^1.0.0-beta.12",
    "vue": "^2.6.11 || >=3.0.5"
  }
}

Now comes the important part 📝, to take notes on it: replace all the imports coming from vue to vue-demi, like so:

import { defineComponent, ref } from 'vue';

Will become:

import { defineComponent, ref } from 'vue-demi';

The library will redirect to vue@2 + @vue/composition-api or vue@3 based on users' environments.

That's powerful.

Build config

You can build your plugin bundle in so many different ways, webpack, vue-cli (webpack also), parser, rollup, etc. It's up to you, but I really recommend using rollup.js, is a great module bundler, really easy to get into, and is used in most of the major Vue plugins out there, such as Vue Router.

yarn add rollup rollup-plugin-vue rollup-plugin-typescript2 rollup-plugin-terser @rollup/plugin-node-resolve @rollup/plugin-commonjs @rollup/plugin-replace -D

Also, we will need to tweak a little bit the configuration so it externalizes vue-demi instead of vue and set it as a global at the build moment. Because the rollup.config.js is quite large, here is the link to it at the example repo.

In the method createConfig make sure you have vue-demi set in the property globals like this:

// rollup.config.js
...
output.globals = { 'vue-demi': 'VueDemi' };
...
const external = ['vue-demi'];

Finally, let's add a script in the package.json and the paths for the package builds:

// package.json

"scripts": {
  "build": "rollup -c rollup.config.js",

}
"main": "dist/vue-universal-lib.cjs.js",
"browser": "dist/vue-universal-lib.esm.js",
"unpkg": "dist/vue-universal-lib.global.js",
"jsdelivr": "dist/vue-universal-lib.global.js",
"module": "dist/vue-universal-lib.esm-bundler.js",
"types": "dist/vue-universal-lib.d.ts",

Caveats

Of course, is not all roses 🌹 and unicorns 🦄, the use case of vue-demi is rather for vue plugins that don't rely too much on rendering components because Vue 2 and Vue 3 render functions are quite different and the breaking changes between both, i.e. v-model on a component expecting differently named events in Vue 2 vs 3 (ìnput vs update:modelValue).

That's why we used a render function for our component definition and a .ts file instead of a .vue file. For this example library, it will not affect the end result but it's something you need to take into consideration.

One way to possibly adapt breaking changes in your lib component would be the use of extra APIs from Vue Demi to help distinguishing users' environments and to do some version-specific logic.

isVue2 isVue3

import { isVue2, isVue3 } from 'vue-demi';

if (isVue2) {
  // Vue 2 only
} else {
  // Vue 3 only
}

That being said I hope this article was illustrative enough on the journey of creating a universal plugin for Vue. Let me hear your thoughts and questions below.

Happy coding! 😎

Create Dynamic Forms in Vue3.

Alvaro Saburido — Tue, 12 Jan 2021 14:46:11 +0000

New Year, first article! Let's get started. 🤩

So after several months of lockdown in Spain and really relaxing holidays, I worked hard on a plugin to bring Dynamic Forms to Vue3 and Composition API and finally, the stable 3.x version was released yesterday 🥳.

// Detect dark theme var iframe = document.getElementById('tweet-1348598628038934529-236'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1348598628038934529&theme=dark" }

But... what Dynamic Forms even mean? Well is basically a vue component that renders forms and inputs dynamically based on a data object/schema that represents the business logic.

<template>
  <dynamic-form :form="testForm" />
</template>

<script lang="ts">
...
setup() {
  const form = ref({
    id: 'test-form',
    fields: {
        username: TextField({
            label: 'Username',
        }),
        email: EmailField({
            label: 'email',
        }),
    }
  })

  return {
    form
  }
}
...
</script>

No more huge template files, no more "We need to do a new release because the client wants to change the username input label" 🤯. Forms schemas can be async and forms generated on go with an easy-going validation approach. All that for only 26kB.

Still interested in quickly create forms in Vue 3.x? This article is for you.

What we are going to build?

Just a simple login form similar to the one here. We are going to cover

Email input with validation,
Password input with validation
Checkboxes
Form submission

Create the demo app

For the app creation let's use Vite⚡️

yarn create @vitejs/app my-login-demo --template vue-ts

Installation

To install just run:

yarn add @asigloo/vue-dynamic-forms

# or, using NPM
npm install @asigloo/vue-dynamic-forms

The installation and usage have changed to align with the new Vue 3 initialization process.

To create a new plugin instance, use the createDynamicForms function.

// main.ts

import { createApp } from 'vue';
import { createDynamicForms } from '@asigloo/vue-dynamic-forms';

const VueDynamicForms = createDynamicForms({
  // Global Options go here
});

export const app = createApp(App);

app.use(VueDynamicForms);

Theming

Vue Dynamic Forms is style agnostic, which means components have no predefined styles by default, so you can set them as you like. If you prefer a more ready-to-go solution for styling you can import a default theme file from the package like this and override the variables like this.

// styles.scss
$input-bg: #e2eb5d52;
$input-border-color: #aec64c;

@import '~@asigloo/vue-dynamic-forms/dist/themes/default.scss';

Login Form

Go to your App.vue and add the <dynamic-forms /> component into your template:

<template>
  <div class="app">
    <dynamic-form
      :form="form"
    />
  </div>
</template>

Next step is to write down the form schema using a ref in the setup method

You can also define form as a computed property in case using vue-i18n labels or to reactively assign a value to any form property such as visibility or dropdown options

import { defineComponent, ref } from 'vue';
import { EmailField, PasswordField, CheckboxField } from '@asigloo/vue-dynamic-forms';

export default defineComponent({
  name: 'App',
  setup() {
    const form = ref({
      id: 'login-form',
      fields: {
        email: EmailField({
          label: 'Email',
        }),
        password: PasswordField({
          label: 'Password',
          autocomplete: 'current-password',
        }),
        rememberMe: CheckboxField({
          label: 'Remember Me',
        }),
      },
    });
    return {
      form,
    };
  },
});

Let's open our browser and check our new form with the vue-devtools. If you don't have it install it yet and want to work with Vue3 support, I recommend you to install the Beta version on the chrome store here. It includes awesome new stuff such as a Timeline for component events.

As you can see in the image above, each field was transformed into a FormControl object containing crucial info for its rendering and behavior. With this, you can easily check and debug your forms.

It took what? 5 minutes?. 🤭

Form submission

Now that we have our form in place, we want to do something with the input data. There are two ways to do it:

Use a submit button to trigger a submit event. (Recommended option, it also check if the form is valid).
Use the change event to get the latest state of the form values. (This one doesn't care about validation but it's helpful for autosave features for example)

Using a `submit` button.

If you add a button of type submit just below the <dynamic-form /> with the attribute form equal to the form.id it will trigger the form submission internally.

 <dynamic-form
   :form="form"
   @submitted="handleSubmit"
   @error="handleError"
 />
 <button
  class="btn"
  submit="true"
  :form="form?.id"
 >
  Sign In
 </button>

For this road, we have two (2) possible events:

submitted in case the validation went well and the form is valid (retrieve all values) ☑️
error in case there is an error in the form (retrieves all errors) ❌

On change detection

The DynamicForm component also offers a change event in case you want to get the latest state of the form values right away. Is important to consider it will retrieve the values without considering validation, (errors will still be shown at UI level) so you probably want to do a second validation outside.

 <dynamic-form
   :form="form"
   @change="valuesChanged"
 />

 setup() {
    const formValues = reactive({});
    const form = ref({
      id: 'login-form',
      fields: {
        // Form-fields
      },
    });

    function valuesChanged(values) {
      Object.assign(formValues, values);
      console.log('Values', values);
    }

    return {
      form,
      valuesChanged,
    };
  },

Validation

Normally, forms submit data to a backend service, we want to make sure that the data required is sent, and is sent correctly so we don't end with errors in the console or "limbo" states in our application.

Let's make our email and password fields required for the submission. Just add a property validations with an array of all the validation you want the field to have, in this case, let's import the required validator like this:

import { required, EmailField, Validator } from '@asigloo/vue-dynamic-forms`;

Then add it to your field definition:

email: EmailField({
  label: 'Email',
  validations: [
     Validator({ validator: required, text: 'This field is required' }),
  ],
}),

If you try to submit the form empty, or you touch and blur the input without value it will add error classes to your component so you can style it accordingly

If you correct the validation, which in this case, it's just adding a value to the field and you blur, a success class will be added to the control

What about checking if the email format is correct and adding a complex validation to your password?

By default, Vue Dynamic Forms contains the following validations:

required
min
max
email
URL
minLength
maxLength
pattern.

So let's use the email and pattern validator to our cause:

import {
  required,
  email,
  FormValidator,
  // ...
} from '@asigloo/vue-dynamic-forms';

setup() {
    const emailValidator: FormValidator = {
      validator: email,
      text: 'Email format is incorrect',
    };
   // ...

   email: EmailField({
     label: 'Email',
     validations: [
       Validator({ validator: required, text: 'This field is required' }),
       emailValidator,
     ],
   }),
}

Similar to this, let's use the pattern validation, this function is special because it takes an argument which is the regex pattern you want to apply to the validation.

import {
  required,
  email,
  FormValidator,
  // ...
} from '@asigloo/vue-dynamic-forms';

setup() {
    const passwordValidator: FormValidator = {
      validator: pattern(
        '^(?=.*[a-z])(?=.*[A-Z])(?=.*)(?=.*[#$^+=!*()@%&]).{8,10}$',
      ),
      text:
        'Password must contain at least 1 Uppercase, 1 Lowercase, 1 number, 1 special character and 
        min 8 characters max 10',
    };
   // ...

    password: PasswordField({
      label: 'Password',
      autocomplete: 'current-password',
      validations: [
         Validator({ validator: required, text: 'This field is required' }),
         passwordValidator,
      ],
    }),
}

Wrap Up

So that's pretty much it, you can check the complete solution here (it also shows how to use with TailwindCSS)

Of course, this is a pretty simple example, but I will post more use cases in the near future, such as async form data,i18n, custom fields, and third-party components

If you have any questions feel free to open a discussion on the comment section or ping me on Twitter @alvarosaburido. I'm always hanging around.

We're also looking for contributors to improve and maintain the repo, If you are interested in the challenge please DM me.

DEV Community: Alvaro Saburido

TresJS v2 First steps with 3D on Vue

Basic parts of a 3D scene

Installing

Usage

TresCanvas Props

Perspective Camera

Adding an object

Initialise instances with args

Transform the object

Position

Rotation

Scale

Transform the Camera

Conclusion

Build 3D Scenes Declaratively with TresJS using Vue

The mighty getting started step

Setting up the experience Canvas

Creating a scene

Arguments

Adding a Donut 🍩

Props

Set

Scalar

Color

FAQ

Is TresJS open source?

Is there a Nuxt module?

Can I contribute?

Video

Deploying a Nuxt Site on Netlify between a pnpm monorepo

The initial idea

Choosing PNPM workspaces

Nuxt

Netlify

Trouble Shooting

Building the UI package

Getting the Publish directory right

`workspaceDir` #11074

Final Form

Wrap up

5 Javascript Utility functions I love the most ️

5. Slugify

4. Mock Async

2. Deep Clone

1. 🎉 snakeToCamel (🐍 to 🐫)

Fancy favicon external link component in Vue

Create a link component

Getting the favicon

Add it to your app

Getting Started with Vite 2

Announcing Vite 2.0

Evan You ・ Feb 16 '21

Scaffolding your first Vite project

Structure of a Vite project

Dev server

How does it work?

vue-cli

Vite dev-server

The struggle of slow updates

Article No Longer Available

What, no loaders for styling?

Plugins, plugins, plugins

@vitejs/plugin-vue

antfu/vite-plugin-pwa

vite-pwa / vite-plugin-pwa

Zero-config PWA for Vite

antfu/vite-plugin-md

antfu / vite-plugin-md

Markdown with Vue for Vite

antfu/vite-plugin-icons

unplugin / unplugin-icons

🤹 Access thousands of icons as components on-demand universally.

Nuxt/vite 😍

nuxt / vite

⚡ Vite Experience with Nuxt 2

antfu/vite-plugin-components

unplugin / unplugin-vue-components

📲 On-demand components auto importing for Vue

Tailwind on-demand with windicss

Initialise instances with `args`

What is `<script setup>`?

Using `setup()` arguments

Using a `submit` button.