VueDose

How to test Web Workers with Jest

Tue, 20 Oct 2020 02:56:00 GMT

As you could read in Alex's article, [Use Web Workers in your Vue.js Components for Max Performance](https://vuedose.tips/use-web-workers-in-your-vuejs-component-for-max-performance/), you can use Web Workers to maximize performance in your Vue.js app instead of running heavy tasks in the main thread which is UI-blocking. But how can we test Web Workers? Webpack-bundled Web Workers are not supported by Jest so we have to mock the worker in order to test it! Let's see how to do in 3 simple steps, starting from a simple Vue app to calculate the Fibonacci number, where `fibonacci` function is the heavy task performed by the Web worker (you can follow the code [here](https://github.com/astagi/webworker-test)) First of all we need to isolate the main functionality of our worker, in this case is really straightforward because it's just our `fibonacci` function (`src/fibonacci.js`) ~~~js let fibonacci = (num) => { if (num <= 1) return 1; return fibonacci(num - 1) + fibonacci(num - 2); } export default fibonacci ~~~ and keep the worker minimal (`src/fibonacci.worker.js`): ~~~js import fibonacci from "./fibonacci"; self.onmessage = async function (e) { self.postMessage(fibonacci(e.data)); }; ~~~ This way we can mock just the Web Worker part of our implementation (`src/__mocks__/fibonacci.worker.js`) ~~~js import fibonacci from "../fibonacci"; export default class fibonacciWorker { constructor() { // Note that `onmessage` should be overwritten by the code using the worker. this.onmessage = () => { }; } postMessage(data) { this.onmessage({ data: fibonacci(data) }); } } ~~~ and easily test the main functionality ~~~js import { shallowMount } from '@vue/test-utils' import App from '@/App.vue' jest.mock("@/fibonacci.worker") describe('Fibonacci App.vue', () => { it('should calculate Fibonacci number', async () => { const wrapper = shallowMount(App) await wrapper.find('input').setValue('10') await wrapper.find('button').trigger('click') expect(wrapper.find('.result').element.innerHTML).toBe('Result: 89') }) }) ~~~ I created `workerloader-jest-transformer` to generalize this solution so that all workers are mocked at once. This Jest transformer helps you to test Web Workers loaded with Webpack worker-loader module in Jest. It's easy to use, install it with ~~~sh yarn add workerloader-jest-transformer --dev ~~~ and add the tranformation rule to your Jest configuration: ~~~js transform: { "^.+\\.worker.[t|j]sx?$": "workerloader-jest-transformer" } ~~~ This transformer is inspired by [jsdom-worker](https://github.com/developit/jsdom-worker) and implements Web Worker API for JSDOM, so you can remove any mocking code as you can see [here](https://github.com/astagi/webworker-test/tree/feature/jesttransformer). Workerloader-jest-transformer is highly experimental and code is available on [Github](https://github.com/astagi/workerloader-jest-transformer), any contribution and advice would be greatly appreciated!

How to use the new Fetch in Nuxt.js

Mon, 07 Sep 2020 03:57:00 GMT

It was back in the March (March 17th to be exact), when the Nuxt.js team introduced version 2.12 and the new Fetch hook. This step made it possible to create better architecture for our Nuxt projects. You may wonder what I am talking about. The fetch was there the whole time... or was it? Yes it was, but in version 2.12 you can now define the fetch hook on the component, which is much cleaner than before. I will cover the difference between the old and new fetch in another article. Imagine you have a simple component which should show multiple teasers of the articles. In the headless CMS (Storyblok in my case) you could select the articles using the multiselect, like in this example. ![](https://paper-attachments.dropbox.com/s_F71899AF079BA5A6DB5D27935BC60CC06C07E8F87294187045ED27DB5F163713_1597841497368_image.png) The articles are usually content types on their own. They used to live in a separate folder and have a pretty rich content. Because of this the JSON response of this story will not contain the content of the articles, but the IDs of the articles. You can see this in the following code sample, where the property `articles` is array of IDs. ```json { "_uid": "47d9a0eb-fccd-463a-bfd1-5393afce3ff2", "title": "Selected Articles", "articles": [ "7a9efb98-f8e2-4482-b77e-b7d12fd7297c", "c3a03db7-b8f8-48ab-abaf-9d84c477a071", "b429a8b0-668c-42b3-b043-f4a3de4966c4" ], "component": "featured-articles", "_editable": "" } ``` You could also include whole content of the articles in the response, but that is another topic covered by this article from Storyblok. This situation brings up a good question: Where should we request and load our data? Back in the old days, I would do it in the page (in the page folder of Nuxt). The new fetch allows us to do it directly in the component, which then will also render our data. This means, that if we don't use that component, these data will be not requested. That's awesome! It also means that all of our logic and styling will live in one file. I named this component `FeaturedArticles.vue` and it looks like this (with a little bit of TailwindCSS styling): ```vue ``` You can see in the template that we can end up with three different situations: - $fetchState.pending - If the request takes a long time we will inform the user that we are loading articles. - $fetchState.error - If we get an error from our end-point, we will let the user know about it. Then we could show a button to renew request. - !$fetchState.pending - Finally if the request was succesful, we will render the teasers on the page. Why do it like this? - You can provide better UX to your user. - You don't have to use $store. - You will load data only when you need them. - Your logic lives in one place and is not spread through multiple files. - If you decide to remove the component, you will remove all of it's code with it. You can read more about the new Fetch hook and its option in the official Nuxt.js documentation. This was just the tip of the iceberg. 😏 In the next tip I will compare the difference between the old fetch and the new fetch. Stay tuned and see you soon!

Generate and deploy the blog as a full static Nuxt site

Tue, 25 Aug 2020 01:55:00 GMT

Congrats if you reach this point because that means you should have now a fully running blog with articles, authors and topics, as well as search functionality thanks to [Storyblok](https://www.storyblok.com/). All organized in UI components with [TailwindCSS](https://tailwindcss.com/) and basic SEO and social media sharing covered. Now it's the time to show it to the world! ## Generating a Nuxt.js full static site Since version 2.14, you're able to [generate full static sites](https://nuxtjs.org/blog/going-full-static/) with Nuxt.js. That was indeed one of the releases that I've been waiting for so badly. If you go back to the first chapter where [we set up a full static Nuxt.js site](https://vuedose.tips/setting-up-a-full-static-nuxt-site), remember that we prepared the Nuxt.js project already to be full static. You can double check it by looking at the *nuxt.config.js* file: ```js export default async () => { const routes = await fetchSitemapRoutes() return { mode: 'universal', target: 'static', // ... } } ``` The `target: static` part is the one in charge of making that happen. Here's the cool part, to generate the full static project you just need to run `npm run generate` and Nuxt will create the HTML files for everything: ![https://a.storyblok.com/f/83078/770x804/530d96422b/07-01-run-generate.png](https://a.storyblok.com/f/83078/770x804/530d96422b/07-01-run-generate.png) {.img-shadow} As you can see, each route we created has its own folder with its `index.html` file, all pre-rendered. You can also run `npm run start` after being generated to see that it's working correctly. But in order to deploy it, in the way I'm going to show you, you don't need to run these commands locally. Hang on a second and continue reading 😉. ## Deploying the full static website By nature, a static site, also known as a [JAM Stack](https://jamstack.org/) site, it's fast and secure because of the fact that it doesn't render on the server. Just like ready-cooked meals, a static site is pre-rendered and there is no rendering nor processing effort on the server side. At the end, it's all HTML, CSS and JavaScript, and to run that you just need a basic static server since all the rest happens on the client side. Normally, a static site is served pre-rendered and from that point becomes an SPA when it reaches the browser. It'd perform API calls or whatever is needed to get the data for a page. But when we specify that the website is a **full-static** site, it means that literally all API calls are performed only once at compilation. In order to host and deploy the site, we have several options in the market and it might be hard to choose one. I'm going to suggest to you my top 4, knowing that my preferences are: - As zero-config as possible - Good pricing with a free-tier option - Friendly for frontend devs ### Hosting options It comes without saying that probably **[Netlify](https://www.netlify.com/)** is the top here, and the one we'll use. It's focused on static sites. It's performant with a generous free-tier and with many features covering most of the cases for static sites and SPA's. I love using [Surge](https://surge.sh/) for demos, because to deploy it you just need to literally run one command: `surge`. It's for frontend code as well and quite easy to use. In the land of cloud servers that are not only-frontend, my favorite is by no doubt [Vercel](https://vercel.com/). It's zero-config, focused on DX and performance and very easy to use for one that is not used to deal with servers. It's probably one of the very few that has a free tier as well. The last I'd suggest is Digital Ocean. You'll choose this one when you want to have more control on your server. The prices are very convenient and it's indeed a quality product. Alba Silvente has a nice guide on [how to deploy a Nuxt static site](https://dev.to/dawntraoz/how-to-deploy-a-nuxt-full-static-site-in-digitalocean-4l73). ### Deploying the site to Netlify Netlify is where VueDose is hosted, and I'm completely happy and satisfied by it. I have no knowledge about DevOps or system administration, so configuring servers and stuff is always daunting for me. But Netlify makes it very easy. As easy as pushing some buttons, so let's get started. Assuming your project is hosted on Gihub or Gitlab, you can **automatically** **connect it to Netlify**. For that, log into Netlify and you'll see this button to create a project from Git directly: ![https://a.storyblok.com/f/83078/1688x690/f1d3c90ab8/07-02-netlify-new-site.png](https://a.storyblok.com/f/83078/1688x690/f1d3c90ab8/07-02-netlify-new-site.png) {.img-shadow} You'll go through a step-by-step process where you'll connect to Github, Gitlab or Bitbucket and choose your repository. At some point, you'll reach a step where you have to **configure the build commands**. Here's where you need to set `npm run generate` and the `dist` folder to be published: ![https://a.storyblok.com/f/83078/1680x1182/1dd5477e9a/07-03-netlify-commands.png](https://a.storyblok.com/f/83078/1680x1182/1dd5477e9a/07-03-netlify-commands.png) {.img-shadow} You can also set the branch where you want to be *"listened"* instead of the master branch by default, so it can fit your personal workflow. And... that's basically it! Let it run for a minute or two and you'll see... ![https://a.storyblok.com/f/83078/1646x698/b094e89105/07-04-netlify-error.png](https://a.storyblok.com/f/83078/1646x698/b094e89105/07-04-netlify-error.png) {.img-shadow} An error!!!??? WTF? Wait, I just forgot something important: we haven't set the environment variables. We have them locally in the *.env* file, but that's not published to the repository, and it shouldn't for security reasons. Instead, we need to do it on Netlify itself. Go to the *Site settings > Build and deploy > Environment* page and set the environment variables as you need: ![https://a.storyblok.com/f/83078/2468x1168/caa9a00918/07-05-netlify-env.png](https://a.storyblok.com/f/83078/2468x1168/caa9a00918/07-05-netlify-env.png) {.img-shadow} :::blockquote Don't copy this image values, but instead use the ones you need to. ::: After fixing that, let's trigger a new deploy. Go to the deploy page and you'll find this button to do it: ![https://a.storyblok.com/f/83078/1998x1188/93e9e187de/07-06-netlify-trigger-deploy.png](https://a.storyblok.com/f/83078/1998x1188/93e9e187de/07-06-netlify-trigger-deploy.png) {.img-shadow} This time, all should work properly and your site will be live! Yay \o/ You'll see the default url that Netlify gives you on the overview page: ![https://a.storyblok.com/f/83078/1712x782/a3d21a2aa4/07-07-netlify-success.png](https://a.storyblok.com/f/83078/1712x782/a3d21a2aa4/07-07-netlify-success.png) {.img-shadow} What I love from Netlify is that you can have your custom domain, HTTPS, redirects and much more for free! Check out [their docs](https://docs.netlify.com/domains-https/custom-domains/) to know-how! ## Wrapping Up Yes, this is the end. It was an incredible journey to guide you through how to create, step-by-step, a full-static blog with Nuxt.js and Storyblok following the same process that we used for VueDose. You've learnt how to create the project from scratch and how to define components based on a design system, how to build articles overview and detail pages. We dug deep into the Storyblok and learn how to transform our/your design into the components, how to organize your content and create queries to get it. At the end we learnt how to generate and deploy it statically into the world wide web. I feel very proud to say this was done thanks to the help and collaboration of [Storyblok](https://www.storyblok.com/developers?utm_source=newsletter&utm_medium=logo&utm_campaign=vuedose), a beloved sponsor of ours 💚. If you have any questions, feel free to reach [VueDose](https://twitter.com/vuedose) or [Storyblok](https://twitter.com/storyblok) on Twitter and we'll answer everything for you! Stay awesome.

Optimize SEO and Social Media Sharing in a Nuxt blog

Tue, 18 Aug 2020 00:01:00 GMT

So far in this guide, the blog is full-featured since we added [tags and search functionality](https://vuedose.tips/tags-and-search-functionality-in-nuxt-using-storyblok-api). But still, SEO is important in a blog so we cannot overlook it. SEO is a big thing and there are people working almost exclusively in SEO, especially those working on copywriting. That's why I'm not covering everything about SEO here. I'm not an expert on it, but at least we can make sure the blog has the minimum stuff for having the basics sorted. We'll make sure the pages have the correct metadata for search engines and social sharing, as well as generating a sitemap so we make easier the job for search engines. ## Meta Tags and Social Media One of the basic things we can do is to set up the meta tags for our blog pages. They're important for giving some extra info to the search engines, so they can show better information on the [SERP](https://www.wordstream.com/serp) (Search Engine Result Pages). For instance, if you search *"vuedose"* on Google, you'll see this result thanks to the meta tags and the sitemap: ![https://a.storyblok.com/f/83078/1638x842/fe5b30cf36/06-01-serp-explanation.png](https://a.storyblok.com/f/83078/1638x842/fe5b30cf36/06-01-serp-explanation.png) {.img-shadow} I'll cover the sitemap topic later, but for now you can see at least we have a `title` and `description` meta tags. First, set them in *nuxt.config.js* using the `head` property, just like this: ```js export default { // ... head: { title: "NarutoDose", meta: [ { hid: "description", name: "description", content: "Get to know all about Naruto and its characters in tiny bits of info.", }, // ... ], }, }; ``` That will be translated to `` and inserted by Nuxt within the `` tag. It's necessary that we set `hid`, otherwise the tags will be duplicated. Since later we'll add more tags in different pages, I'll suggest to create a util function for it. Create the file *utils/seo.js* with the following function: ```js export const createSEOMeta = (data) => [ { hid: 'description', name: 'description', content: data.description }, ] ``` And update it on *nuxt.config.js:* ```js import { createSEOMeta } from "./utils/seo"; export default { // ... head: { title: "NarutoDose", meta: [ ...createSEOMeta({ description: "Get to know all about Naruto and its characters in tiny bits of info.", }), // ... ], }, }; ``` Now we need to do it on each page as well. If a tag is not set on a page, Nuxt will fallback to the one in *nuxt.config.js* if it exists there, so for the home page located at *pages/index.vue*. Let's go to *pages/_slug.vue* and set it there. In this case, it's a dynamic page, but that's no problem because the `head` method can access the component instance properties: ```js export default { // ... head() { const { title, description } = this.article.content return { title, meta: createSEOMeta({ description }), } }, } ``` :::blockquote In case you're wondering where `this.article` comes from, I explained in another article how to [show the blog content in Nuxt using Storyblok API](https://www.storyblok.com/tp/show-blog-content-in-nuxt). ::: In *pages/topics/_slug.vue* can be more simple, since I'd just set a title and let take the rest from the default one from *nuxt.config.js.* Since it's a category, I'd like it to show up in the SERP and the browser tab like `CATEGORY_NAME - NarutoDose`: ```js head() { return { title: `${this.topic.name} - NarutoDose`, } }, ``` ### Social Media Sharing Imagine you have your blog published and you want to share the link of an article on Twitter, Facebook or LinkedIn. By default, that'd be shown as just a link. Wouldn't be cool that instead of showing just a link, it can appear in a more visual way, like this? ![https://a.storyblok.com/f/83078/1192x1246/116d779bc0/06-02-social-media-tweet.png](https://a.storyblok.com/f/83078/1192x1246/116d779bc0/06-02-social-media-tweet.png) {.img-shadow} They are called Social Cards, and they don't show up automatically. We need to add some extra tags. In particular, we need the ones for the [Open Graph](https://ogp.me/), a protocol coined first by Facebook but now also Twitter and LinkedIn (I can imagine Instagram as well). We need at least the tags: - `og:title` - `og:description` - `og:url`: the absolute URL that points to the article. - `og:image`: make sure it has the right resolution - `twitter:card`: the type of card you want to show on Twitter. We'll use `summary_large`, give it a look at [Twitter docs](https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/summary-card-with-large-image). You could use some extra ones if you want to polish it even more, but like these we're ok. Let's add these tags to the `createSEOTags` util function we defined before: ```js export const createSEOMeta = (data) => [ { hid: 'og:title', property: 'og:title', content: data.title }, { hid: 'description', name: 'description', content: data.description }, { hid: 'og:description', property: 'og:description', content: data.description, }, { hid: 'og:image', property: 'og:image', content: data.image }, { hid: 'og:url', property: 'og:url', content: process.env.HOST_NAME + '/' + data.url, }, { hid: 'twitter:card', name: 'twitter:card', content: data.cardType || 'summary_large_image', }, ] ``` Since the url must be absolute, probably it's a good time for you to add a `HOST_NAME` variable on you *.env* file. We have all the data we need to set these tags, except the `image`. So first of all let's go to our Storyblok space and add an *asset field* to the Article schema. ![https://a.storyblok.com/f/83078/1280x1164/a910dc55b2/06-03-storyblok-asset.png](https://a.storyblok.com/f/83078/1280x1164/a910dc55b2/06-03-storyblok-asset.png) {.img-shadow} :::blockquote If you don't know how to do it, take a look at [how to set up your blog structure on Storyblok](https://www.storyblok.com/tp/setting-up-blog-content-structure), I've explained how to add fields to a schema there 😉. ::: Then, go through each article and update them by adding an image to each one. Once you do that, go to *pages/_slug.vue* and update the `head` function: ```js head() { const url = this.article.slug const { title, description, image } = this.article.content return { title, meta: createSEOMeta({ title, description, image: image.filename, url }), } }, ``` Notice the image url is located on `image.filename`. Do the same in *nuxt.config.js*: ```js import { createSEOMeta } from "./utils/seo"; export default async () => { const routes = await fetchSitemapRoutes(); return { head: { title: "NarutoDose", meta: [ ...createSEOMeta({ title: "NarutoDose", description: "Get to know all about Naruto and its characters in tiny bits of info.", image: "[Insert_NarutoDose_Image_URL]", url: process.env.HOST_NAME, }), ], }, }; }; ``` That'd be basically it. If you need to set specific tags on *pages/topics/_slug.vue* you're free to do it. ## Sitemap A sitemap tells search engines how's the page structured. That not only makes your pages indexable, but it makes the job easier to search engines and will be able to show the different sections of your site as you saw on the first image above. To generate a sitemap, let's use [@nuxtjs/sitemap](https://www.npmjs.com/package/@nuxtjs/sitemap): a Nuxt module that makes the job easy. Just install it and add it to the `modules` section on *nuxt.config.js*. Then, in the same file, you need to add this minimal configuration: ```js sitemap: { hostname: process.env.HOST_NAME, routes: [] // all the dynamic routes }, ``` The module will pick up by default the static routes, but it's not able to pick up the dynamic routes. So we have to fetch them and add it to it. I'll suggest to do that in a utility function, so create a *utils/sitemap.js* file with the following content: ```js import StoryblokClient from 'storyblok-js-client' import kebabCase from 'lodash/kebabCase' export const fetchSitemapRoutes = async () => { const routes = [] const client = new StoryblokClient({ accessToken: process.env.STORYBLOK_KEY }) const { data: articlesData } = await client.get('cdn/links', { starts_with: 'articles/', }) const { data: tagsData } = await client.get('cdn/tags') Object.values(articlesData.links).forEach((article) => routes.push(`/${article.slug}`) ) tagsData.tags.forEach((tag) => routes.push(`/topics/${kebabCase(tag.name)}`)) return routes } ``` We use `storyblok-js-client` to fetch the data. You don't need to install it since it comes by default with `storyblok-nuxt` module. Then we fetch all the articles and tags and form an array of strings with all the routes. Notice that for the articles we use the [Links Endpoint](https://www.storyblok.com/docs/api/content-delivery#core-resources/links/retrieve-multiple-links), which is much faster and convenient for cases when you don't need the stories content. You don't even need to paginate them. Finally, we need to use that function to fill up the routes. By default, we're exporting an object from *nuxt.config.js,* but for cases like this where we need to perform an async operation like fetching the routes, we can export a function instead: ```js import { fetchSitemapRoutes } from "./utils/sitemap"; export default async () => { const routes = await fetchSitemapRoutes(); return { // ... sitemap: { hostname: process.env.HOST_NAME, routes, }, // ... }; }; ``` That's it. To test if it works, make sure you have a `generate` script in your *package.json* and run `npm run generate`. A *dist* folder must've been generated, containing the right *sitemap.xml* file on it: ![https://a.storyblok.com/f/83078/1766x1114/ef6d98be96/06-04-sitemap.png](https://a.storyblok.com/f/83078/1766x1114/ef6d98be96/06-04-sitemap.png) {.img-shadow} ## Wrapping Up It's important not to have just a blog, but to make sure your blog it's minimally prepared for SEO and being positioned. It's true that you can do much more to improve SEO, mostly dependent on the quality of the content you write. But at least with the right meta tags and a sitemap you cover the basics of it. Now that the blog it's ready, what's next? The last step: deploy it 😉 Coming next week!

Advanced i18n in Nuxt using Interpolations

Mon, 17 Aug 2020 00:57:00 GMT

In [NuxtJS](https://nuxtjs.org/) on our home page we have a title which has the letters **JS** as a green color, a different color to the rest of the text. Obviously this is done by adding a span with a color of light-green. This span is then added to all the other languages we have. We then import this using `v-html`. So far so good. It works. Why change this? ~~~js title: 'The Intuitive Vue Framework', ~~~ ~~~vue

~~~ So recently we added [eslint](https://eslint.org/) to our main website. Obviously this didn't pass the rule where `v-html` is considered a bad practice. But with eslint we can just turn off the rule. Problem solved. OK but what happens if we need to change the light-green to a dark-green. Well we need to change it in the i18n file of each language. Tedious? Well we could just do a find and replace. Problem solved. So basically it means people can translate our text and change the text and color to anything they like. But surely they wouldn't do that. But that's not the point. Should we really have this in our translations? Is it really necessary? Isn't there a better way? That's where [i18n interpolation](https://kazupon.github.io/vue-i18n/guide/interpolation.html) comes into practice. With i18n, instead of using `v-html` we can instead use interpolation. How? i18n gives us an `` component that we can use on any of our pages or inside our components. In this component we can set up the tag to be any html element we want such as `h2`, `div`, `a` or whatever we want to use for that particular text. ~~~vue ~~~ We then allocate it to our translation. If for example in our *en-EN.js* file we have `homepage.title`: ~~~js module.exports = { homepage: { title: 'The Intuitive Vue Framework' } } ~~~ Then this is what we will use as the path in our `` component. ~~~vue ~~~ We can also add classes to our component just like any other component ~~~vue ~~~ We can now use slots inside our component to render what we want, which in our case is our span class. We give the slot a name so we can then refer to it in our translation file. And then we add our span. ~~~vue ~~~ Now in our translation file we can add the name of our slot enclosed in curly brackets where we want the actual span to appear. ~~~js module.exports = { homepage: { title: 'The Intuitive {frameworkType} Framework' } } ~~~ This will now give us the translated text with a placeholder for our span class. And in our *fr-FR.js* file we can add the French translation where our placeholder will go at the end of the sentence instead of after the word Intuitive like in English. ~~~js module.exports = { homepage: { title: 'Le Framework Intuitif basé sur {frameworkType}' } } ~~~ Now if we want to modify our span to be a different colour or add more styling we only have to do it in one place, and our translators only have to worry about translating the texts without having to deal with unnecessary html. It is also possible to add more than one slot to your `` component. For example, for styling purposes, you might want to add a break in the sentence. Just make sure you give them unique names and then you can use the placeholders in your translation files. ~~~vue ~~~ ~~~js title: 'The Intuitive {br} {frameworkType} Framework', ~~~ ~~~js title: 'Le Framework Intuitif {br} basé sur {frameworkType}', ~~~ As you an see it is much better to use i18n interpolation rather than v-html in your code as it allows you to keep your styling and html separate from your translations. This not only makes it easier for translators but it also makes it much easier to modify as the html code is not repeated throughout the translation files. If you have never worked with i18n then check out these links to help you get started: - For more info on using i18n with Nuxt.js check out the [nuxt-i18n module](https://i18n.nuxtjs.org/) - For more info on component interpolation checkout the [vue-i18n docs](http://kazupon.github.io/vue-i18n/guide/interpolation.html) - To learn more about i18n checkout the [i18n course on Vue School](https://vueschool.io/courses/internationalization-with-vue-i18n)

Tags and Search Functionality in Nuxt Using Storyblok API

Tue, 11 Aug 2020 01:57:00 GMT

I want you to think for a moment: when you get into the role of a blog reader, what do you really want? In most cases, you probably want to easily find content relevant and interesting to you. You might be interested in apples, and I am only interested in pineapples. Maybe you're just interested in sweet fruit, or you want to find only the purple fruit. What you're looking to do is to narrow down the content and navigate through it. We can do this in the following two ways: - **Categorization**: use of tags, topics, taxonomies or any type of category. - **Search**: unstructured way to find content more easily Let's see how to implement this in our blog. ## Content Topics in the Nuxt Blog In the article *[Setting up the blog content structure in Storyblok](https://www.storyblok.com/tp/setting-up-blog-content-structure)* we've already added some tags to the articles we've created. At this point I encourage you to create some more articles so you'll better understand this section. The categorization strategy we're going to implement is simple: an article can belong to different topics and we want to have a page for each topic, listing all the articles related to that topic. You don't need to do anything in Storyblok. As you've seen before, we'll be using tags for it, and the rest of the functionality is there for us. Let's start by creating the routing for the topics pages. They will have a url following the form of `/topics/:slug` so we have to create the page at *pages/topics/_slug.vue*. It'll have a similar shape to the home page, so for now copy/paste the template from *pages/index.vue*: ```vue ``` We'll link to the topic page from the article detail, located at *pages/_slug.vue*. A story in Storyblok includes a `tag_list` field: ```js { id: 17434028, // ... tag_list: ['Beast', 'Hokage'] } ``` Let's use it in order to show the tags just below the `

` tag in *pages/_slug.vue*: ```vue

...

``` Since the tags can have any string shape, you have to make sure it gets converted to a slug so it can be a valid link. That's why you see `tagSlug(tag)` in there. You can implement it with [lodash](https://lodash.com/) easily: ```js import kebabCase from 'lodash/kebabCase' export default { // ... methods: { tagSlug(tag) { return kebabCase(tag) }, } } ``` The result should look like this: ![https://a.storyblok.com/f/83078/1558x822/f69586ee71/05-01-tags.png](https://a.storyblok.com/f/83078/1558x822/f69586ee71/05-01-tags.png) {.img-shadow} *Note: Don't worry about the search box, I'll get into that later* 😉. Going back to *pages/topics/slug.vue*, we have the opposite problem here: we have access to the **topic slug, but not to the topic itself. What we can do is to fetch the topics using the [tags resource](https://www.storyblok.com/docs/api/content-delivery#core-resources/tags/tags) and find the tag from the response. That call returns an object with the following shape: ```json { "tags": [ { "name": "Beasts", "taggings_count": 2 }, { "name": "Techniques", "taggings_count": 1 } ] } ``` Let's use the `asyncData` function on *pages/topics/slug.vue* to perform the call and search for the right topic name*:* ```js import kebabCase from 'lodash/kebabCase' export default { async asyncData({ app, params }) { // Find tag based on the slug const { data: tagsData } = await app.$storyapi.get('cdn/tags/') const topic = tagsData.tags.find((t) => kebabCase(t.name) === params.slug) } } ``` Notice that we're calling `cdn/tags/` and the `kebabCase` operation to compare the slugs. Using `params.slug` you're accessing the slug from the route url parameter. Now that we have the right topic, let's retrieve the articles for that topic. You need to use the `with_tag` [stories option](https://www.storyblok.com/docs/api/content-delivery#core-resources/stories/stories): ```js async asyncData({ app, params }) { // Find tag based on the slug const { data: tagsData } = await app.$storyapi.get('cdn/tags/') const topic = tagsData.tags.find((t) => kebabCase(t.name) === params.slug) // Fetch articles const { data: articlesData } = await app.$storyapi.get('cdn/stories', { starts_with: 'articles/', resolve_relations: 'author', with_tag: topic.name, }) const articles = articlesData.stories.map((story) => { story.content.date = new Date(story.content.date) return story }) return { topic, articles } }, ``` Finally, to differentiate it from the home page, update the page `

` tag to show as well the topic name and count: ```vue

{{ topic.taggings_count }} articles on #{{ topic.name }}

``` The page will look similar to this: ![https://a.storyblok.com/f/83078/1692x910/f85bef9975/05-02-topics-page.png](https://a.storyblok.com/f/83078/1692x910/f85bef9975/05-02-topics-page.png) {.img-shadow} ## Search Content Using Storyblok API Having a way to navigate through different topics is great, but sometimes we want to search for something specific more easily. That's where search comes into place, and you will rarely see a decent blog or content-based website without a search box. Let's start by creating a *SearchBox* component. It must have a search input, and when the user types in it, it will perform a call to get the stories that match the criteria. An example of that *SearchBox* could be: ```html ``` I won't explain this component in detail, since it's not relevant. You're free to code your own or to use any existing libraries like the finely done [vue-multiselect](https://vue-multiselect.js.org/). What's important on this *SearchBox* component is: - It keeps a `searchInput` and `suggestions` state. - When the search input changes, it performs a call to retrieve the results. We do this by listening to the `@input` event and delegating the responsibility for how the call must be done to the parent component by receiving a `search` property. It's convenient as well to `debounce` the function, so it doesn't perform a call for every keystroke, but instead it'll do that when the user stops typing for 300ms. - When the user *blurs* the input, we empty the suggestions to close the suggestion list. But we do it 300ms later, otherwise it won't be possible to click on a suggestion since the list closes immediately on blur. Now you can use it on *components/layout/AppHeader.vue* to show the SearchBox in the header. But before you do that, let me explain something. When we talk about a full-text search, it means that given a registry of data (in this case the article stories) the system performs a search on all of the fields you need. Usually, this can be quite complex, and you have technologies specifically built for it (like [ElasticSearch](https://www.elastic.co/start)) and services (like [Algolia](https://www.algolia.com/)). Here comes one of my favorite parts of Storyblok: it gives you a free full-text search, and it's actually quite easy to use. All you need to do is to use the `search_term` parameter on your API query. Use it on your *AppHeader.vue* component and make use of the *SearchBox*: ```html ``` I've also added a `per_page` so we don't have a bunch of results, but the 5 most relevant. When you run it, you should see it working like this: ![https://a.storyblok.com/f/83078/1634x910/feeb466f9a/05-03-search.png](https://a.storyblok.com/f/83078/1634x910/feeb466f9a/05-03-search.png) {.img-shadow} ## To Sum Up Making it easy for your readers to find the content that they want doesn't need to be complicated nor complex. Providing them with categorization, tagging and search functionality is a good way to achieve it. You've seen how easy it is to do that in a [Nuxt](https://nuxtjs.org/) blog thanks to [Storyblok](https://www.storyblok.com/) and all the great capabilities its API has. But the job is not done... Is the blog discoverable by the search engines yet? Probably we still have a lot to do about SEO... stay tuned and we'll solve that next week in part 6! Do you want to play with the code? Find it [on Github](https://github.com/alexjoverm/narutodose/tree/05-tags-and-search-functionality-in-nuxt-using-storyblok-api).

Creating UI components based on a Design System in Vue.js

Tue, 21 Jul 2020 01:52:00 GMT

*In [the previous part of this guide](https://vuedose.tips/setting-up-a-full-static-nuxt-site) you created a basic Nuxt project, full-static ready including TailwindCSS. In this one you'll take it from that to start designing some components, but before you get to that, I want to tell you how we structured VueDose Design system.* Organizing Vue.js components can be quite difficult if you're not very experienced with it. It took me a while to learn how to do it in a decent way, and that was through a lot of try and fail approaches. Nowadays, frontend technologies, paradigms and ecosystem are changing so fast, that many best practices have not yet been established. What's even worse is that often designers and frontend developers don't understand each other very well! Have you felt the pain of any of these points? I want to make this easier for you by sharing this article about how [Aarón Garcia](https://twitter.com/aarongarciah) (UI designer) and I worked together to build VueDose 2.0. We created a Design System using [TailwindCSS](https://tailwindcss.com/) to easily implement the design system and structuring in Vue.js components. Then, you'll apply these concepts to Naruto Dose, the project we're building to better understand the things you learn. *Note: I'll focus more on the implementation side, but expect in the future an article where* [Aarón Garcia](https://twitter.com/aarongarciah) *describes in depth the creative process of designing VueDose Design System.* ## Designing a Design System When you decide to create a software product with a top quality design, you should consider creating a [Design System](https://uxdesign.cc/everything-you-need-to-know-about-design-systems-54b109851969). Why? Because it gives you the design structure, patterns and elements to make sure your design is consistent, harmonious and balanced throughout the product and people working on it. It's the language all designers and frontend devs are going to use to talk about design. We structured the VueDose design system by separating the elements into 4 different layers: **style guide, components, modules and pages**. In fact, this is similar to how [Atomic Design](https://bradfrost.com/blog/post/atomic-web-design/) structures elements. :::blockquote success Give a read to the amazing article "[How to structure a Vue.js app using Atomic Design and TailwindCSS](https://vuedose.tips/how-to-structure-a-vue-js-app-using-atomic-design-and-tailwindcss)" by [Alba Silvente](https://vuedose.tips/authors/alba-silvente/) to learn more about this. ::: ### 1. Style Guide The style guide contains the basic rules, constraints and elements that your design will be built upon. In VueDose style guide we define: - Screen breakpoints (mobile, tablet, desktop...) - Colors - Typography - Spacing - Grid and Container - Icons - Shapes - Borders - Shadows - ... Aarón designed it in [Figma](http://figma.com), and looks like this: ![https://a.storyblok.com/f/83078/1797x1359/fa3e63ec33/02-style-guide.png](https://a.storyblok.com/f/83078/1797x1359/fa3e63ec33/02-style-guide.png) The question still remains, why is TailwindCSS a good fit for creating a style guide and how does it work? Easy: TailwindCSS is style guide oriented. In fact, by default it gives you a standard and well-thought out style guide. Being a utility based CSS framework, it gives you the flexibility to define your own styling rules and uses them as classes. You can better understand it with this comparison: If you don't follow a style guide, and you have to set a margin top, you probably just play with some sizes, like 12px, 15px, 18px... until it fits the design, supposing the design is not following a style guide. But when you have a style guide, your elements are calculated coherently without guessing. For example, we can apply an 8-pt spacing scale in the VueDose style guide: ![https://a.storyblok.com/f/83078/1451x860/15e704d339/02-sizing.png](https://a.storyblok.com/f/83078/1451x860/15e704d339/02-sizing.png) The spacing is always multiples of 8, giving you a consistent, calibrated and aligned design. The end result is that you'll have an optimized [vertical rythm](https://builttoadapt.io/8-point-grid-vertical-rhythm-90d05ad95032) and better reading experience. Same for typography, colors, borders, icons... They're all calculated to bring balance to the design. ### 2. Components Once you have a style guide defined, you use it to build components. A component is considered an atomic element. This means that a component, in general, doesn't include other components. Some examples of components are buttons, links, form elements, alerts, logos... This is how we defined some components in the design system: ![https://a.storyblok.com/f/83078/1394x1497/4a07723232/02-components.png](https://a.storyblok.com/f/83078/1394x1497/4a07723232/02-components.png) ### 3. Modules We consider a module a combination of components to create a "bigger component". For example, for the article cards we use a button, an avatar, a title and tags, which you can see in this image: ![https://a.storyblok.com/f/83078/1644x1358/9c4037b510/02-modules.png](https://a.storyblok.com/f/83078/1644x1358/9c4037b510/02-modules.png) Examples of modules are your website header and footer, a card or a form. ### 4. Pages Finally, we use a combination of modules and components that follow our style guide to create the pages. This is an example of the Home page in VueDose: ![https://a.storyblok.com/f/83078/1847x1335/2bda3c8b80/02-pages.png](https://a.storyblok.com/f/83078/1847x1335/2bda3c8b80/02-pages.png) ## Creating your own design system You probably realize that building a design system makes design much easier, since you start building the smaller elements that you later use for bigger ones. That not only improves the gap between a designer and a developer, since they now have a common language measured and calculated to work on. But, it also makes your design more consistent. Is this all that complex to implement? Not at all. Lucky for us, today you have good libraries to make this easily happen. TailwindCSS covers very well the style guide part, while Vue.js, by itself, is component oriented. The combination of both: extremely powerful. Let's see how to apply this kind of design to NarutoDose. ### Style Guide To create a style guide you start by defining the colors, spacing and typography. You can create your fully customized style guide as we did in VueDose. In this case, let's start from the tailwind default utilities set which is very well thought out and has everything you need: - **Colors:** tailwind includes a nice [color palette](https://tailwindcss.com/docs/customizing-colors/#default-color-palette) you can use - **Spacing:** an [8-pt spacing system](https://tailwindcss.com/docs/customizing-spacing/) is also there for you to use on width, padding and margin. - **Typography:** you can use a combination of the [font size](https://tailwindcss.com/docs/font-size) and [line height](https://tailwindcss.com/docs/line-height) utility classes for custom fonts, and the recently released [typography plugin](https://github.com/tailwindcss/typography) for the blog contents formatting. First of all, open the file *tailwind.config.js* in your Nuxt project. Let's add a main color that we want to use in our application, based on the color Teal 500. For that, let's extend the default colors: ```js const { theme } = require('tailwindcss/defaultConfig') module.exports = { theme: { extend: { colors: { main: theme.colors.teal['500'], // #38b2ac }, }, }, // ... } ``` You could have written `main: '#38b2ac'` directly, but you can reuse the default TailwindCSS theme like that to build yours. I'm adding the main color under the `extend` key. That allows you to add your customizations while keeping TailwindCSS defaults, and apply that to all theme customizations. In case you want to fully override TailwindCSS colors, you have to write your settings just below the `theme` key without `extend`. You will use the `theme` key to override or extend any [configuration from TailwindCSS](https://tailwindcss.com/docs/theme). ## Creating Components First of all, I want to tell you how I **organize components** in the world of Vue.js where everything is a component. I do that by categorizing them depending on their responsibilities. In particular, I organize it by creating these folders under `components`: - `layout`: components that are related to the main application layout, such as the navbar, main header, footer, etc. - `ui`: visual components that have no application logic and are usually reusable across the app. The obvious example are any components from a UI library like [Vuetify](https://vuetifyjs.com/en/). - `app`: they have application logic and they usually use ui components and are generally a bit more complex. They can either be reusable or not. Some examples could be: a login form, a user table, a filtered product list... or anything that has some business logic - `page-sections`: page components can sometimes get too big. In those cases, I start splitting a page component into page section components. Combined with the special [layout](https://nuxtjs.org/guide/views#layouts) and [pages](https://nuxtjs.org/guide/views#pages) directories, this structure is complete. ### Layout First of all, let's define a simple layout with a navbar. Create the file `components/layout/AppHeader` with the following markup: ```vue ``` Notice we use `bg-main`. That's the custom color we added before, and we can use that for background, text and borders. The cool part is that just by changing its value in the tailwind configuration, we change how the whole app looks 😉. Then add it to `layouts/default.vue`: ```vue ``` In case you find it difficult to understand TailwindCSS and its classes, I suggest you take a look at these [beautiful docs](https://tailwindcss.com/docs/installation/) and play around a bit. It's pretty easy once you have some practice. ### Design the ArticleCard component You already created `components/ArticleCard.vue`. That's a good example of a UI component, so let's follow the structure proposed above and move it into `components/ui/ArticleCard.vue`. Then add some tailwind magic to make it look nice: ```vue ``` Notice I've also added a `date` prop. Now let's add some styling to the home page, located under `pages/index.vue`: ```vue ``` I'm using a [grid](https://tailwindcss.com/docs/grid-template-columns/) to show the articles in 1, 2 or 3 columns, depending on the window size. For now, translate the date simply by using `date.toLocaleDateString()`. In order to see several article cards displayed, let's repeat the article object that we have on `asyncData` several times, and add the `date` property as well: ```js export default { asyncData() { const articles = [ { title: 'How to make your articles Vuetiful', description: 'This article guides you through all the steps to make an article shine with your favourite framework, Vue', author: { name: 'Naruto Uzumaki', image: 'https://a.storyblok.com/f/83078/500x500/cb27fcd15a/naruto-avatar.jpg', }, date: new Date(), }, { ... }, // more articles repeated { ... }, ] return { articles } }, } ``` That's it. If you followed the steps correctly, you should see an interface like this: ![https://a.storyblok.com/f/83078/1355x873/c4290c8129/02-final-result.png](https://a.storyblok.com/f/83078/1355x873/c4290c8129/02-final-result.png) ### Layout key points There are some layout techniques and best practices I've applied that might have gone unnoticed. Let me emphasize them: - Use of **[container](https://tailwindcss.com/docs/container/#app)**. You can see in AppHeader and the home page that I've used the classes `container mx-auto px-4`. A container is used to limit the width of the content, and we use it inside the AppHeader or the sections (instead of outside) because that way we can have a background color in full width (like AppHeader) while having the inner content width adjusted. You can center it and add a padding [by default in tailwind config](https://tailwindcss.com/docs/container/#centering-by-default). Then you only need the `container` class, without `mx-auto px-4`. - Set vertical **separation with margin top.** For consistency, always use margin-top to separate elements, and no margin-bottom or padding-top. Margin is for separation, and padding is for inner spacing. - Margins and widths are set **outside the elements**. If you check *ArticleCard*, it doesn't have any width or margins because it's not its job to know how it's going to be displayed in different places. *ArticleCard* has its inner dimensions (padding, and separation between inner elements), but how it is displayed is decided in `pages/index.vue` using the grid classes. ## Recap This is the end of the article, but not the end of the guide! In this article I focused on showing you the way [Aarón](https://twitter.com/aarongarciah) and I decided to architecture VueDose 2.0 design, explaining all the techniques and methodologies we used to ensure a **consistent design** for the best viewing and reading experience. In particular, you've seen how to create a design system and to structure it in different layers. You've also learned how to apply these concepts to NarutoDose, the pet project you're creating to integrate all of the lessons, and how TailwindCSS fits perfectly for this way of styling web apps. Did you like it so far? Great, because the best is yet to come. In the next article, you'll bring the articles to life! We'll set up the content structure in [Storyblok](https://www.storyblok.com/developers?utm_source=newsletter&utm_medium=logo&utm_campaign=vuedose) and use its API to take the data from there. Are you ready for it? 😏 **Pssst**: find [this lesson's code on Github](https://github.com/alexjoverm/narutodose/tree/02-creating-ui-components-based-on-a-design-system-in-vuejs).

Setting up a full static Nuxt site

Tue, 14 Jul 2020 03:56:00 GMT

When I start a project these days I usually choose [Nuxt](https://nuxtjs.org/) for it. Why? Because I can do all the things I do with plain [Vue.js](https://vuejs.org/) in less time, thanks to its conventions and the amazing Nuxt modules. Some people think because of these conventions you lose flexibility. That's far from the truth: I've been using Nuxt for the last 2 years and I haven't found a case where I can't do what I wanted to do. I've been using it even in [Sprinter](https://www.sprintersports.com/), one of the biggest Spanish sports E-Commerce. I spoke about the challenges we faced in [this talk on Vue Day 2019](https://www.youtube.com/watch?v=rzYoM2jVJr0). But what I love the most about Nuxt is that you can produce 3 types of applications mostly with the same code: - **SSR** (Server Side Rendered): they're rendered on the server for every request. Sprinter works like that. - **SPA** (Single Page Application): client-only javascript based apps. Nowadays, they're quite well-known. - **Static Generated**: a.k.a. [Jam Stack](https://jamstack.org/). Similar to SSR, but the html is rendered at compile time, so they don't need a server while also being SEO friendly. [VueDose](https://vuedose.tips/) is built as a static generated site, for different reasons: - SEO friendly - Very fast: HTML is already rendered - Saving on resources: it doesn't need a server, so you're saving money and [the planet](https://www.websitecarbon.com/) Since Nuxt 2.13, we can create **full static** websites. In other words: you can generate a pure HTML + CSS + JavaScript site. All the Ajax calls to any API's are made at compile time, and then stored in json files locally. What does that mean? Easy: huge **performance boost.** But hey that's too much introduction, right? Let's start building NarutoDose! ## The Stack ### Nuxt.js I think I showed enough love to Nuxt, right? Ok fine let's show Nuxt love once more 💚💚💚 ### Storyblok (vs Nuxt Content Module) Nuxt's recent release, [@nuxt/content](https://content.nuxtjs.org/): an amazing module for creating your contents under a `content/` folder by default. Your contents can be in Markdown, Yaml, JSON and other formats and it exposes an API where you can query those contents. Honestly, this was the missing part in the Nuxt ecosystem for indie tech bloggers. You might think, couldn't you create VueDose with @nuxt/content? Yeah, I definitely could. But I didn't. Why? Because, even though they both have things in common such as: - A flexible API to query contents, including full-text search - Ability to schedule content - Ability to use rich text format, such Markdown There are definitely different: - **@nuxt/content:** it acts as a git-based CMS, meaning that people need to be familiar with git. That's ok for most tech blog cases, just something to be aware of. - **[Storyblok](https://www.storyblok.com/developers?utm_source=newsletter&utm_medium=logo&utm_campaign=vuedose)**: it's much more than that. Although easy to use, it's a fully cloud-based CMS product that has more features for working with content such as, being able to define a schema, relationships and even a visual editor. It can be extended with plugins, although by default you also have roles, on-the-fly image resizing service, assets managements, and more. It can be managed by a non-dev user. Since I wanted to leverage the power of Storyblok on VueDose, that was an easy decision to make. No worries, soon you'll know how to do it too 😉. ### TailwindCSS You know that there are many CSS frameworks out there... the well-known [Vuetify](https://vuetifyjs.com/en/), the new exciting [Chakra UI](https://vue.chakra-ui.com/) for Vue, [Buefy](https://buefy.org/), [Bootstrap Vue](https://bootstrap-vue.org/) and of course the marvelous *[INSERT YOUR NEW UI FRAMEWORK HERE]*. But [Aarón](https://twitter.com/aarongarciah) and I decided to design VueDose from scratch, creating our own Design System, carefully thought out for giving the best reading experience and a beautiful UI. [TailwindCSS](https://tailwindcss.com/) is not opinionated and is perfect for this case. Check out the next article to find out all the whys and how-tos 😏 ## Create a Nuxt project The easiest way is to use npx (install it if you haven't) to run create-nuxt-app: ```bash npx create-nuxt-app mini-vuedose ``` That will open a prompt where you can select the features you want. For this project we'll choose TailwindCSS and it's important to choose *Universal (SSR / SSG)* as a rendering mode and *Static (Static/JAMStack hosting)* as a deployment target: ![https://a.storyblok.com/f/83078/837x438/878133bee7/01-npx-create-nuxt.png](https://a.storyblok.com/f/83078/837x438/878133bee7/01-npx-create-nuxt.png) Now let's clean up some things: - Remove the folders `store` and `middleware`. You don't need them for now. - Remove `components/Logo.vue` - In `pages/index.vue`, remove the ` ``` We want a component to be as generic as possible, to the point that we could reuse it in different websites with different brands. But how can we do that? Well, first of all, we are not going to assume that we'll always get text as content. What if we want to pass different markup like `` or pass an icon? The best way to overcome this problem? Make use of [slots](https://vuejs.org/v2/guide/components-slots.html). Let's work on the styling now. As always, a good rule of thumb is to use [scoped](https://vue-loader.vuejs.org/guide/scoped-css.html) which makes our CSS local. However, we want some things global, right? For instance the brand colors. Right now we are breaking the [DRY](https://www.notion.so/%5B%3Chttps://en.wikipedia.org/wiki/Don%27t_repeat_yourself%3E%5D(%3Chttps://en.wikipedia.org/wiki/Don't_repeat_yourself%3E)) principle by duplicating the concept of a primary color. If we needed to change the primary color we'll have to change it in every place it's hardcoded. The solution? Use [custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*). ```vue ``` We would normally define custom properties in another file and target the `:root` selector and not inside the component, but for the sake of this example we are going to do it inside the component. Colors and spacing is usually what changes the most in web design, so we have to make sure we protect ourselves from these changes. This makes the component very flexible as we can change these properties and it will affect all the elements that make use of them. However, how could we tackle theming? Well we could use non-declared custom properties. Wait. What? Let me explain with code: ```vue ``` Where are we declaring `--button-border-color`, `--button-hover-text-color` and `--button-hover-background-color`? That's the trick, we are not. We are using an undefined custom property but giving it a default value. So, if one of these properties does not exist at runtime it will fallback to the default value. This means that from the outside we can do something as follows: ```vue ``` And this is super flexible, but maybe too flexible. We don't want to expose so much knowledge to the client. Maybe the client just wants to set instead of a primary colored button a secondary theme. And the button should be able to know what things it has to set in order to have the look and feel of a secondary button. So let's mix **custom properties and themes**! ```vue ``` So we can do this easily: ```vue Hello VueDose! ``` And finally. All the cool kids nowadays are doing dark themes right? ```vue ``` We can switch `--background-color` and `--on-background-color` values to create new themes! And that will be all. Thanks for reading through all! Just like that, it works! Check it out yourself in [this CodeSandbox](https://codesandbox.io/s/vuedose-84yg5)! Here it goes today's tip!

The most modern Pie Chart component using CSS Conic Gradient and Vue.js

Mon, 21 Oct 2019 22:00:00 GMT

In the last tip a show you how to build [The most modern Carousel component using CSS Scroll Snap](https://vuedose.tips/tips/the-most-modern-carousel-component-using-css-scroll-snap-and-vue-js). This time we'll follow the same line to build a Pie Chart! But before starting, just wanted to mention that if you're a Packt user, this week my book on [Testing Vue.js components with Jest](https://www.packtpub.com/programming/testing-vue-js-components-with-jest) has been published there too! Back to the topic, this time I'm showing you another new CSS feature: **Conic Gradient**. With it, we can easily build a Pie Chart component. In fact, it'd be very easy to build a color palette component, but that's another topic! In order to construct a pie chart, we need to define every section of the conic gradient, which is used on the `background` css property. For instance, the following pie chart: Is defined with the following CSS rule: ```css background: conic-gradient( #00A37A 0 40%, #365164 0 70%, #A54f93 0 100% ); ``` As you see, in each section you must define the color, the position from the center (in this case always 0) and how much angle that section must take. The angle of that section must be absolute: they act like different layers that overlap each other in a Z index. However you probably want to pass to the Pie Chart component the "piece" of the cake that a section must take. Something like: ```js { pieData: [ { color: "#00A37A", value: 40 }, { color: "#365164", value: 30 }, { color: "#a54f93", value: 30 } ] } ``` So that when you sum up all pieData values, they total 100. Given this introduction, let's build a `PieChart.vue` component. This component must take the above `pieData` structure and build the right `background: conic-gradient(...)` given that data: ```vue ``` First, notice we gave it a 50% `border-radius` in order to make it rounded. The main part of this component is in the `pieStyles` computed prop. Basically there we map the `pieData` property to build an array of conic sections with the shape of `"#aeaeae 0 30%"` for instance, and finally build it in the `background` CSS property. In that way, for the following data: ```js { pieData: [ { color: "#00A37A", value: 40 }, { color: "#365164", value: 30 }, { color: "#a54f93", value: 30 } ] } ``` The `pieStyles` computed property will return: ```css background: conic-gradient( #00A37A 0 40%, #365164 0 70%, #a54f93 0 100% ); ``` Just like that, it works! Don't trust me? Check it out yourself in [this CodeSandbox](https://codesandbox.io/s/piechart-component-example-iv1yu)! Here it goes today's tip!

The most modern Carousel component using CSS Scroll Snap and Vue.js

Sun, 06 Oct 2019 22:00:00 GMT

Last week I went to Codemotion Madrid with my beloved friend [Laura Bonmati](https://twitter.com/laurabonmati). It's one of the biggest conferences about coding in Spain. One of our favourite talks was *"The latest features in CSS"* (in Spanish) by [Sonia Ruiz](https://twitter.com/Yune__vk), and this tip comes from some ideas I took from her talk, so let's give her a shoutout on twitter for the inspiration! Among the features she showed, I was amazed by `scroll-snap` and how easy is to create a carousel by using it, so I thought... let's make it a component! First, create a `Carousel.vue` component with the following structure: ```vue ``` The important parts here are the use of `scroll-snap-type`. Using it we're forcing the scroll to snap to every item inside the `.carousel` element, in the *x* axis. Then you need to make every item in the carousel to take the full space of the container. You do that using `flex: 1 0 100%` and defining the items alignment with `scroll-snap-align: start`. Notice that I'm also passing by a `width` and `height` properties so you can easily set the carousel dimensions from outside the component. By the way, if you're not sure about how `` work, you can check the articles [Using scoped slots in Vue.js](https://vuedose.tips/tips/using-scoped-slots-in-vue-js/) and [New v-slot directive in Vue.js 2.6.0](https://vuedose.tips/tips/new-v-slot-directive-in-vue-js-2-6-0/) and know more about them (including scoped slots). Just like that, you have a carousel component that works smoothly using the mouse scroll! But hey... let's add some functionality right? What if you want to change the carousel slides manually? As you might have thought, the carousel "sliding" works according to the scroll, so you must play with the scroll position. In fact, each slide scroll position is exactly the width of the carousel multiplied per the slide position in the carousel. Let's add a couple of buttons that allow us to go back and forth in the carousel, so we can navigate through every item: ```vue ``` These buttons call the `changeSlide` method passing by the number of positions you want to navigate back or forth. The method basically takes the carousel current width, and calculates where should scroll by checking the current scroll position and adding the amount of pixels where it should navigate. That calculation is defined by `carousel.scrollLeft + width * delta`. If you try the component now, you'll see that it works as expected, but the scroll is not smooth. Instead, it changes the slide immediately. Luckily, modern CSS comes to the rescue again! You can use the property `scroll-behavior: smooth` on the carousel element and the scrolling will be smooth again! ```css .carousel { display: flex; overflow: scroll; scroll-behavior: smooth; scroll-snap-type: x mandatory; } ``` Finally, the way to use the component is as simple as this: ```vue ``` Do you realize how easy was to build this component? Modern CSS is rad! I'm pretty sure you're now thinking on more ways to improve it: change slides automatically every X seconds, loop scrolling, go to a specific slide... please, tell me what you come up with and show it to me! I'll be more than happy to see what you accomplish! Of course, keep in mind that this component uses very new CSS properties, so it's only supported in the most modern browsers. But hey, you must be building the Carousel of the future! Do you want to see this carousel working? Go to this [CodeSandbox](https://codesandbox.io/s/carousel-component-5zkbe)!

Data Provider component in Vue.js

Tue, 24 Sep 2019 00:00:00 GMT

By using component-based technologies such as Vue.js, doesn't mean that all components must be UI based. In fact, my favourite way to apply advanced reusability in large applications is by using component composition. With _scoped slots_, as you haven seen in _["Using scoped slots in Vue.js"](https://vuedose.tips/tips/using-scoped-slots-in-vue-js)_, you can encapsulate logic in another component and pass it to a slot via props. That allows you to compose the UI and behaviour of a new component by combining multiple of them. Today, I'm going to show you a **Data provider Component** example. Data Provider is a **renderless component**, meaning that it doesn't need to render anything. The base to create a _renderless component_ is to create a _scoped slot_ from a render function and pass any prop to it: ```js render() { return this.$scopedSlots.default({ loading: !this.loaded, data: this.data }); } ``` Due to an [inconsistency on scoped slots](https://github.com/vuejs/vue/issues/8056) (fixed by version 2.6), you can better do it like this to make it work in any case: ```js render() { const slot = this.$scopedSlots.default({ loading: !this.loaded, data: this.data }); return Array.isArray(slot) ? slot[0] : slot; } ``` Knowing that, to create a Data Provider component you must perform an ajax/fetch call when the component is created, and then pass that data to the scoped slot. A final version of `DataProvider.js` could be: ```js import axios from "axios"; export default { props: ["url"], data: () => ({ data: null, loaded: false }), created() { axios.get(this.url).then(({ data }) => { this.data = data; this.loaded = true; }); }, render() { const slot = this.$scopedSlots.default({ loading: !this.loaded, data: this.data }); return Array.isArray(slot) ? slot[0] : slot; } }; ``` Notice that it's a `.js` file. Since it just has the script part of the component, it doesn't need to be a `.vue` file. The Data Provider component also is holding a loading state, so you can use that to render different UI depending on that state. An example could be: ```html ``` That's it! If you want to check this example running, go to this [CodeSandbox](https://codesandbox.io/s/2w6zp30kjy)! Don't forget to share [VueDose](https://vuedose.tips) with your colleagues, so they also know about these tips as well! See you next week. Alex

Using Scoped Slots in Vue.js

Sun, 15 Sep 2019 00:00:00 GMT

Multiple times I get to know companies that want to improve their productivity when coding in Vue.js. That's a too open question, but at least some part can be achieved that by identifying what functionality they build pretty often in their apps, and then having a toolkit of reusable components that allow you to put that common logic in there, while being flexible enough to adapt to other apps. Vue.js has _slots_ in order to make components have a redefinable structure, but by themselves they're pretty limited. Sometimes you need some data or state in order to define how a component should render. If you don't know slots, I suggest you learn them first on [the Vue.js docs](https://vuejs.org/v2/guide/components-slots.html). Scoped slots is an advanced feature in Vue.js that allows you to do that. They're like normal slots, but they can receive properties as well. Let's build a `Clock.vue` component in order to illustrate that. Basically it must be a time counter: ```vue ``` You might have noticed the `` line, that's the slot receiving the `time` property. That's the way this `Clock.vue` component can send the time data to the component that uses it, while encapsulating the timer logic itself. You also might have realised that this component already renders the time by itself, as it has some default content within the slot. But what if we want to redefine what it renders, while holding the timer logic in it? Well, since we're passing the `time` property to the slot, we can do that simply by using the `v-slot` directive on the root element of the `Clock` slot. So, wherever you want to render the `Clock` component, you'll write something like: ```vue ``` `v-slot` receives all the props passed from within the `Clock` component. Since that's JavaScript object, we can use the Object Spread Operator to already grab the time prop as `{ time }`. Do you see the power of Scoped Slots? You can do more powerful stuff, like render-less components, that you'll see in a future tip 😜. If you want to run the code yourself, you can find it in this [CodeSandbox](https://codesandbox.io/s/yjjq04vn91)!

Quick Content Testing using Snapshots in Vue.js

Tue, 28 May 2019 11:00:00 GMT

Have you ever heard about Snapshots being _evil_? About how **fragile** they are and how you should avoid them? It's true! You should be extremely careful about them because they do _exact_ comparison of content as text, that is if you are snapshoting a component, you are actually snapshoting its HTML content, so anything changing the HTML will break the snapshot and if this is repeated too often, you may end up accidentally accepting snapshots updates and missing regressions in your application 😱. But you don't have to snapshot the whole HTML! You can even provide a _hint_ to recognize the snapshot and this can be used to generate tests fixtures on the flight in a very convening way, **specially for very large content sets** Imagine you have a very big table and you want to test that given some props, the table renders the right content: ```vue

{{ column.name }}
{{ colum.name }}: {{ item[colum.key] }}

``` Here `columns` is an array of all the columns in the table and `items` in an array of all the rows displayed. You could say both are props. If you want to test the content of the table given those props, you will have to test each row: ```js test('contains the right information', () => { // columns and items are defined above const wrapper = shallowMount(MyTable { props: { columns, items }}) // first cell in the header expect(wrapper.find('thead th:nth-of-type(1)').text()).toBe('Product') // first row in the tbody expect(wrapper.find('tbody tr:nth-of-type(1) .value').text()).toBe('Dinner plates set of 8') // repeat for EVERY row 🤯 }) ``` There are multiple approaches to select the table cell like [using a `data-test` attribute](https://github.com/LinusBorg/vue-cli-plugin-test-attrs) but that's not the issue here. Can we go faster when writing this kind of test? What if we wrote the component, check manually and then add a test that snapshots the current state? ```js test('contains the right information', () => { // columns and items are defined above const wrapper = shallowMount(MyTable { props: { columns, items }}) const cells = wrapper.findAll("td"); for (let i = 0; i < cells.length; ++i) { const cell = cells.at(i); // use label as the hint for the snapshot const label = cell.find(".label"); if (!label.exists()) continue; // filter out cells that do not have a label expect(cell.find(".value").text()).toMatchSnapshot(label.text()); } }) ``` Writing this test will generate a snapshot the first time it is run: ```js // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`MyTable contains the right information: Product Name 1`] = `"Dinner plates set of 8"`; exports[`MyTable contains the right information: Sells 1`] = `"23"`; exports[`MyTable contains the right information: Stock 1`] = `"3"`; // more and more cells ``` The advantages of this solution is that adding a new column will create a single new snapshots without invalidating the others while removing existing columns will make some snapshot **obsoletes** and changing any of the cells `.value` content will make the snapshot test **fail**. If you don't like the idea of creating dozens of snapshots like this, you can create some custom text value and create **one single snapshot**: ```js test('contains the right information', () => { // columns and items are defined above const wrapper = shallowMount(MyTable { props: { columns, items }}) const cells = wrapper.findAll("td"); let content = '' for (let i = 0; i < cells.length; ++i) { const cell = cells.at(i); // use label as the hint for the snapshot const label = cell.find(".label"); if (!label.exists()) continue; // filter out cells that do not have a label content += `${label.text()}: ${cell.find(".value").text()} \n` } expect(content).toMatchSnapshot() }) ``` You will end up with one single snapshot: ```js // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`MyTable contains the right information 1`] = ` Product Name: Dinner plates set of 8 Sells: 23 Stock: 3 etc. `; ``` So remember: Snapshots can also be used to generate tests fixtures with text! Happy Testing!

Style inner elements in scoped CSS using /deep/ selector in Vue.js

Sun, 12 May 2019 20:00:00 GMT

In the [The importance of scoped CSS in Vue.js](https://vuedose.tips/tips/the-importance-of-scoped-css-in-vue-js/) you saw why scoped CSS is important when we want to achieve style encapsulation in components. If you haven't read that tip, I strongly suggest you to do so to understand this one. But when we tried to turn the style of [that example](https://codesandbox.io/s/zwkj000z7p) into scoped CSS, the styles were missing. Here's the thing: when you use scoped CSS, you can modify the root element of the component you want to customise. In other words, from `BlueList.vue` and `RedList.vue` of the example we can only modify the `.list` class of `BaseList.vue` since it's the root element of that component. But what about inner elements? We want to style the `.list-item` class to change the color of the items. For that, we have the `/deep/` selector, and you can use it to access inner elements of components as follows: ```vue ``` Take a look at the [updated example](https://codesandbox.io/s/40y6v5w3w0) and see how now it works as expected and each of them have a different color.

The importance of scoped CSS in Vue.js

Tue, 07 May 2019 22:00:00 GMT

Sometimes I see new devs coming to Vue.js getting confused about scoped CSS in Vue.js. Some using it without really knowing how does it work. If you are there, I hope this tip helps you understand why and when to use them (and when not) 😉. I'm not going to dive deep into the theory as you have it already in the [vue-loader docs](https://vue-loader.vuejs.org/guide/scoped-css.html#mixing-local-and-global-styles). Just to know, it's a vue-loader's feature to avoid style collisions and encapsulate styles by emulating Shadow DOM functionality. Let's better see an example of a problematic situation when you don't use scoped CSS. Imagine we have a `BaseList.vue` component with the following structure: ```vue ``` Then create two components with the same code. Call them `RedList.vue` and `BlueList.vue`: ```vue ``` Now add two different styles to each of them, according to the colors. For instance, for `BlueList.vue`: ```vue ``` Put them together like I did in [this CodeSandbox](https://codesandbox.io/s/zwkj000z7p), and... surprise! You'll see that even though both components have a different color defined, they show the same color: [](/tips/the-importance-of-scoped-css-in-vue-js/ListExample.png) That's because when we don't use scoped CSS, they're global, even though they are in different components. So, in this case one of the styles is overriding the other. That's why scoped CSS are that important: they avoid these collisions to happen out of the box. Here's the joke: if you try to put the `scoped` word into the `style` tag in the example above, you'll see that the styles of the list item won't apply 😅. But that's normal, **next week you'll see how to style inner elements** when using scoped CSS, so stay tuned! To end up, I want to mention that you can mix scoped (thus local) styles with global styles (not scoped). You want to use global styles in these situations: - When applying cross-component styles (utility styles). - When writing a third party library. If you apply scoped CSS, you'd be making your library impossible to customise styles. Keep in mind scoped CSS is not the only solution. You might be comfortable as well using CSS modules or methodologies such as BEM.

How to create a Geolocated Currency with MaxMind in Vue.js

Mon, 22 Apr 2019 21:00:00 GMT

Sometimes you need to integrate a geolocated content on your website. In this little tip I will show you how easy could it be using VueJS, MaxMind GeoIP and Autonumeric. This sample is written in NuxtJS for the special case of a geolocated currency, but the same principles apply on the vanilla VueJS applications. The geolocated currency means, that even if you have a page only in the one language you want to show a different currency according to the country of the visitor. The visitor from the USA will see the dollar sign `$10,000` and the visitor from the Germany would see in the same sentence Euro sign `10.000€`. You could also notice the different punctuation in these two cases. Ok, I assume your content is reachable trough some API of headless CMS like Storyblok, like in my case. Remember, the currency could be use in any string. That's why I defined unique pattern that could be used in any string to mark the geolocated currency. I used this pattern `#{number}#`, which means that string `Price: #{10000}#` will be replaced in the USA with string `Price: $10,000` and in the Germany with `Price: 10.000€`. ```js // API returns: { description: "Price: #{10000}#"; } ``` First you have to find and transform your patterns into HTML tags. I wanted to do it using the global filter, but then I found out that the filter is forbidden in `v-html` and `v-text`. So, I did it with the global mixin, which will transform string `#{number}#` into string `number`. ```js // mixins.js import Vue from "vue"; // Adds global currency method to transfor #{}# string to span Vue.mixin({ methods: { extractCurrency(string) { if (!string.includes("#{")) { return string; } const openTag = ``; const closeTag = ``; const openRegex = /#{/g; const closeRegex = /}#/g; string = string.replace(openRegex, openTag); string = string.replace(closeRegex, closeTag); return string; } } }); ``` As this is the global mixin you can use the function `extractCurrency` in every component. Eg. ```vue ``` If you will generate static page using `nuxt generate` as I did, you will end with a static page containing this: ```vue

Price: 10000

``` Now you have to find out the country of the visitor using GeoIP of the MaxMind and then call Autonumeric function to add correct currency. You will do this in the `mounted()` life cycle of the VueJS as this should be run only at the client side. The best place to do this in the NuxtJS is in your layout file. ```js // layouts/default.vue export default { mounted() { geoip2.country( success => { const currencyType = success.country.iso_code === "US" ? "NorthAmerican" : "French"; AutoNumeric.multiple( "[data-currency]", AutoNumeric.getPredefinedOptions()[currencyType] ); }, error => { console.warn("Error occured by getting geolocation."); } ); } }; ``` If the GeoIP is not working or taking to long time to return location, you can show the number without the currency or show the default currency using CSS `:before` pseudo-element. ```scss // fallback for currency span[data-currency]:not([value]) { &::after { content: " €"; } } ``` Don't forget that you could use also the global event bus in the NuxtJS to trigger method on component according to the geolocation. You would add this line `this.$nuxt.$emit("geolocationFound", success.country.iso_code)` into your mounted cycle. Pretty easy or?

Debugging Templates in Vue.js Components

Thu, 18 Apr 2019 19:00:00 GMT

The [Vue.js DevTools](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd) are awesome to inspect your Vue app but sometimes you might want to debug things that are happening in your template and as you heard that you can place JavaScript expressions there maybe you've tried to place a console.log and find this situation: ![](https://convertkit.s3.amazonaws.com/assets/pictures/122145/2065424/content_carbon__55_.png) ![](https://convertkit.s3.amazonaws.com/assets/pictures/122145/2065425/content_warn.png) This is due that everything that you placed in the template Vue try to find it in the instance so a quick solution could be put a log method in the component to allow Vue to find it: ![](https://convertkit.s3.amazonaws.com/assets/pictures/122145/2065434/content_carbon__61_.png) and just use `{{ log(message) }}`. But this is something that you occasionally want in some different components and it's a little boring to repeat this code all the time so what can we do is to [add an instance property](https://vuejs.org/v2/cookbook/adding-instance-properties.html) and use the Vue.prototype to place our custom log method in the main.js: ![](https://convertkit.s3.amazonaws.com/assets/pictures/122145/2065437/content_carbon__59_.png) so now we can use \$log in every component template and if we don't want to interfere with the rendering just use the JS lazy evaluation with an OR operator 😊 ![](https://convertkit.s3.amazonaws.com/assets/pictures/122145/2065471/content_unnamed__2_.png) awesome, right? :D but... what if we want to place a breakpoint in order to quietly debug some variables around the template? If we place a debugger in the template we might find this: ![](https://convertkit.s3.amazonaws.com/assets/pictures/122145/2065466/content_carbon__65_.png) it is not even compiling the template! 😱 and if we apply the same strategy than before we will find us alone in the prototype function instead of the template that we want to debug: ![](https://convertkit.s3.amazonaws.com/assets/pictures/122145/2065477/content_debugger.png) so in order to place a breakpoint in the middle of the template we can use a little trick wrapping the debugger in an [IIFE](https://developer.mozilla.org/en-US/docs/Glossary/IIFE) (Immediately Invoked Function Expression) like this: ![](https://convertkit.s3.amazonaws.com/assets/pictures/122145/2065489/content_unnamed__1_.png) and we will find ourselves in the middle of the compiled render function: ![](https://convertkit.s3.amazonaws.com/assets/pictures/122145/2065488/content_image__1_.png) where in this case the "\_vm" variable [means ViewModel](https://vuejs.org/v2/guide/instance.html) and is the instance of our component :). This is also interesting to check the compiled template but for some reason the variables are not available in the function scope of the chrome devtools until we place them after the debugger: ![](https://convertkit.s3.amazonaws.com/assets/pictures/122145/2065487/content_unnamed.png) and now you can enjoy inspect everything around! ![](https://convertkit.s3.amazonaws.com/assets/pictures/122145/2065496/content_image__2_.png) That's all! I hope that with these tips you will find yourself more confident debugging Vue templates and also enjoy inspecting the insides of the compiled render functions just for curiosity.

Simple transition effect between pages and layouts in Nuxt.js

Wed, 17 Apr 2019 19:00:00 GMT

Vue.js makes the animations and transitions incredibly easy to implement. So you should really use this opportunity to give a little spark to your application/website to shine. Nuxt.js already builds on the provided capabilities of Vue.js. It gives you a possibility to create a very simple transitions between the pages very fast and almost for no effort. All you need to specify in your `page.vue` file is name of the transition. This name will be used to generate 6 transition classes, which can be use for transition effect between pages. ```js export default { transition: "default" }; ``` NuxtJS will interpret this as `` and it will look for following classes in you css code, which will define the transition between the pages. ```css .default-enter { } .default-enter-active { } .default-enter-to { } .default-leave { } .default-leave-active { } .default-leave-to { } ``` You should definitely check [Vue.js documentation](https://vuejs.org/v2/guide/transitions.html#Transition-Classes) to understand, when are these classes used and what are transition modes. But lets define very simple transition between pages using the opacity. ```css .page-enter-active, .page-leave-active { transition-property: opacity; transition-timing-function: ease-in-out; transition-duration: 500ms; } .page-enter, .page-leave-to { opacity: 0; } ``` After integration of this code into your Nuxt.js application/website, the default transition between pages will take 1000ms and content of the page will fade out and then the new one will fade in. You even don't have to define transition name as the `page` is the default transition name. You can check this code in the [CodeSandbox](https://codesandbox.io/embed/2xovlqpv9n). If you want create a special transition for one of your pages, then you can specify a name of the transition in `page.vue` file as I did in this [CodeSandbox](https://codesandbox.io/embed/2xovlqpv9n) for `intro.vue`. As you can see, if you visit `intro.vue` page the transition is change to two black rectangles. [https://codesandbox.io/embed/2xovlqpv9n](https://codesandbox.io/embed/2xovlqpv9n) Be aware, that all transitions between pages are working only if you are navigating between the pages with the same layout. If you are navigating between the pages with two different layouts you have to use the [layout transition](https://nuxtjs.org/api/configuration-transition#the-layouttransition-property) of Nuxt.js. You can see this in our CodeSandbox, if you visit `other.vue` page. NuxtJS is already setting few defaults on the [page transitions](https://nuxtjs.org/api/pages-transition/) and the [layout transitions](https://nuxtjs.org/api/configuration-transition#the-layouttransition-property). These defaults can be override directly in `nuxt.config.js`: ```js module.exports = { /* Layout Transitions */ layoutTransition: { name: "layout", mode: "" }, /* Page Transitions */ pageTransition: { name: "default", mode: "" } }; ``` These are only the basics of transitioning between the pages in Nuxt.js. Under the hood of the Vue.js is hidden much more power, which can be used to create crazy animations and transitions. So keep digging in the documentation and check this [sample](https://github.com/sdras/page-transitions-travelapp) from Sarah Drasner.

Lazy load images using v-lazy-image Vue.js component

Tue, 16 Apr 2019 19:00:00 GMT

Some time ago I wanted to apply lazy loading in images in order to load them only when they enter the viewport. Researching I found different ways to do it, but they were a bit more cumbersome than what I wanted. I wanted something as simple as having the same `` tag that gets lazy loaded. That's why I created [v-lazy-image](https://github.com/alexjoverm/v-lazy-image), a Vue.js component that extends the `` tag API and applies lazy loading. To use it, once you install it by running `npm install v-lazy-image`, you can add it globally to your project: ```js // main.js import Vue from "vue"; import { VLazyImagePlugin } from "v-lazy-image"; Vue.use(VLazyImagePlugin); ``` And then is as simple to use as using an ``: ```vue ``` You can even use the **progressive image loading** technique by setting a `src-placeholder` property with a tiny image (usually a small version of the image), even by applying your own transition effects using CSS: ```vue ``` You can checkout [this demo](https://codesandbox.io/s/9l3n6j5944) made by [@aarongarciah](https://twitter.com/aarongarciah) where you can see it in action with many different CSS effects!

Dynamic Imports in Vue.js for better performance

Mon, 15 Apr 2019 19:00:00 GMT

I bet you are already familiar with the terms **["code splitting"](https://webpack.js.org/guides/code-splitting/)** and **"lazy loading"**. Let's take the latter definition from [Webpack's docs](https://webpack.js.org/guides/lazy-loading): > Lazy, or "on demand", loading is a great way to optimize your site or application. > This practice essentially involves splitting your code at logical breakpoints, > and then loading it once the user has done something that requires, or will require, a new block of code. This speeds up the initial load of the application > and lightens its overall weight as some blocks may never even be loaded. This kind of feature should be done by default by the frameworks we use, as [some people have suggested](https://twitter.com/slightlylate/status/1018880523446337536). (Also in the [React ecosystem](https://twitter.com/slightlylate/status/1031934342132461568)) ### The meat: Whenever it's possible, I'd recommend to use dynamic imports to import components. They will be lazily loaded (by Webpack) when needed. ~~~javascript // Instead of a usual import import MyComponent from "~/components/MyComponent.js"; // do this const MyComponent = () => import("~/components/MyComponent.js"); ~~~ ### The explanation: When using Webpack to bundle your application, you may use different ways to work with modules (ES Modules, CJS, AMD...). If you choose the ESM way (which is the recommended), you will have this kind of syntax: ~~~javascript import MyComponent from "~/components/MyComponent.js"; ~~~ Notice that there are several use cases where we would like to use asyncronous components. As explained by Alex Jover in [this article](https://alexjover.com/blog/lazy-load-in-vue-using-webpack-s-code-splitting/): * In component importing * In Vue Router, for components mapping * In Vuex modules Let's take a look at the syntax and focus on the `import` part. If you are using Webpack (or [Parcel](https://parceljs.org/)!), that syntax is going to be transformed on *compilation time* and these tools are going to use`Promise`s to load asynchronously your assets/modules/components. Why the need of an arrow function, you might be wondering: As Alex explained, we need to wrap the `import` with an arrow function to be resolved (remember, promises...) only when executed. To demonstrate that they are fully lazy loaded I've prepared a [repository](https://github.com/gangsthub/dynamic-imports-example) (using Nuxt.js). It has 2 pages, each of them use different techniques (**With** and **Without** dynamic imports) to import 2 components (component "A" and component "B"). We will see how, when loading the page with dynamic imports, webpack loads 2 separate files after the navigation. But, the page component itself (`/without`) using regular `import`s, is heavier because it loads everything at once. ![](/tips/dynamic-imports-in-vue-js-for-better-performance/network.png) Image showing network waterfall when navigating to both pages. And the differences between both techniques (with and without dynamic imports) Yes, by using this technique, Webpack will create separate files ("chunks") to load them when needed (lazily). Custom chunk naming can be done with [Magic comments](https://webpack.js.org/api/module-methods/#magic-comments) but that will be the subject of another article 😉. ![](/tips/dynamic-imports-in-vue-js-for-better-performance/featured.png) Image showing the result of nuxt build. See how different chunks are created for components A and B when dynamic imports are used! ### That's it! For a deeper exploration of code splitting techniques check: * De facto linked article by Anthony Gore: [https://vuejsdevelopers.com/2017/07/03/vue-js-code-splitting-webpack/](https://vuejsdevelopers.com/2017/07/03/vue-js-code-splitting-webpack/) * Google's web fundamentals article by Addy Osmani and Jeremy Wagner about code splitting: [https://developers.google.com/web/fundamentals/performance/optimizing-javascript/code-splitting/](https://developers.google.com/web/fundamentals/performance/optimizing-javascript/code-splitting/) * Webpack docs: [https://webpack.js.org/guides/code-splitting/](https://webpack.js.org/guides/code-splitting/) *PS: For this example repo I have used webpack@4.29.6 and Nuxt@2.4.0 which uses Vue@2.5.22.*

Testing logic inside a Vue.js watcher

Sun, 14 Apr 2019 19:00:00 GMT

Even though the most of the time we use computed properties to react to data changes, sometimes we have to use a watcher in order to perform an expensive operation or an asynchronous call to our API. Let's keep it simple for this example. Imagine that you have a component that emits an input event when an internal value changes: ```vue ``` When its time to test this feature, the first thing that comes to our minds is that we have to mount the component, change the internalValue data and expect that the watcher has been fired. But you know what? That feature is already tested by Vue core members. Don't do it again. Evan You is pretty confident that a watcher is fired when its associated value changes. You can do a test like this instead: ```javascript test("emits input event when interalValue changes", () => { const wrapper = shallowMount(YourComponent); wrapper.vm.$options.watch.internalValue.call(wrapper.vm, 15); expect(wrapper.emitted("input")[0][0]).toBe(15); }); ``` Vue attaches to the `$options.watch` object each watcher that we define in our component so what we are doing here is invoking the watcher directly using `call()`. First parameter of `call` is the context of `this` inside the function (the component instance). Then we can pass more parameters (the value). So wrapping up: "Don't test the framework" Sometimes is hard to identify the code that you own from the features that have already been tested thousands of times by the library you are using. I guarantee you that a watcher is going to be fired when the data is changed. Test the logic inside of it, don't waste your precious time trying to re-create the scenario and the conditions that would fire the watcher up.

Handle and redirect 404 responses in Nuxt.js

Sun, 07 Apr 2019 14:00:00 GMT

For me, Nuxt is one of the best pieces of software I've ever used. It makes me be so productive building web apps, no matter if they're SPA, Sever Side Rendered (SSR) apps, or static generated sites, following the JAM Stack trend. *Pss, in fact [VueDose website](https://vuedose.tips/) is built on Nuxt as a static site* 😉 But still, a lot of times find very interesting tricks that are not documented... that needs to stop! Let's share the first hot Nuxt tip! If you're familiar with Nuxt.js, you should know the concept of [pages](https://nuxtjs.org/guide/views/#pages). You should also know that there is a special [Error page](https://nuxtjs.org/guide/views#error-page) (well, it goes into the Layouts folder, but it's a page). You can override the default error page and customize it to your needs... but what if we want a different behaviour? In some cases, we might want that when a user visits a non existing page, we redirect him to the home page. Here's the trick: you can do that easily by creating this `pages/*.vue` component: ```vue ``` In Nuxt, routes are defined by the file naming convention. So when we create a `*.vue` file, we're actually using a wildcard route on Vue Router. Then, we use the `redirect` method from the Nuxt context to perform the redirection, whether it's on the client or server. We do that on the `asyncData` method since we have the context there, but it would perfectly work with the `fetch` method as well: ```vue ``` Go and try it out by typing any non-existent url. You should see how it is be redirected. It'd be helpful if you also share [VueDose](https://vuedose.tips) with your colleagues, so they also know about these tips! See you next week.

Run watchers when a Vue.js component is created

Sun, 31 Mar 2019 14:00:00 GMT

Although Vue.js provides us with computed properties which are very useful for most of the cases, in some situations you might need to use watchers. Watchers by default are run only when the value of the property that is watched changes, and that totally makes sense. Here's how you define a watcher for a dog property: ```js export default { data: () => ({ dog: "" }), watch: { dog(newVal, oldVal) { console.log(`Dog changed: ${newVal}`); } } }; ``` So far so good. If you try that code, the dog watch function would be called as soon as its value changes. However, in some situations you need the watcher to be run as soon as the component is created. You could move the logic within to a method, and then call it from both the watcher and the `created` hook, but there is a simpler way. You can use the long-hand version of the watcher in order to pass the `immediate: true` option. That will make it run instantly on component's creation. ```js export default { data: () => ({ dog: "" }), watch: { dog: { handler(newVal, oldVal) { console.log(`Dog changed: ${newVal}`); }, immediate: true } } }; ``` As you can see, in the long-hand way you need to set the watch callback in the `handler` key of the object. Do you want to see it in action? Check it out yourself in this [CodeSandbox](https://codesandbox.io/s/rwxp7pnklo)!

Simple and performant functional Vue.js components

Sun, 24 Mar 2019 14:00:00 GMT

Sometimes we don't need complex components, and in some cases we don't even need them to have a state on its own. That can be the case when building UI components that don't have much logic in it. For cases like that, **functional components** can be very appropriated. They're stateless and instanceless, which means that it doesn't even have an instance on its own (so no way to call `this.$emit` and such). That makes them **simple** to reason about, **faster** and more **lightweight**. The question is, when can I use a functional component? Easy: when they depend **only on props.** As an example, the following component: ```vue ``` Could be written in a functional way as follows: ```vue ``` Pay attention to the things that changed: - Write `functional` in the `template` tag - Props are accessible via `props` - Since we don't have access to `$emit`, we can use a function as a prop. That's how the React community has done it the whole time and it worked pretty well. - No need for the `script` part Do you want to see it in action? Check it out yourself in this [CodeSandbox](https://codesandbox.io/s/rwxp7pnklo)!

Listen to lifecycle hooks on third-party Vue.js components

Sun, 17 Mar 2019 14:00:00 GMT

Here's a very useful tip I learnt once from my friend [Damian Dulisz](https://twitter.com/damiandulisz), the Vue.js core team member that created the official [Vue newsletter](https://news.vuejs.org) and [vue-multiselect](https://vue-multiselect.js.org). In some cases I needed to know when a component has been created, mounted or updated from a parent component, specially when building components for vanilla JS libraries. You've probably already something like that in your own components, for example, by emitting an event in a lifecycle hook from the child component, like this: ```js mounted() { this.$emit("mounted"); } ``` So then you can listen to it from the parent component like ``. Let me tell you this: there is no need for that, and in fact you won't be able to do it on third party components. Instead, the solution is as simple as listening to an event with the lifecycle hook name, prefixed by `@hook:`. For instance, if you want to do something when the third-party component [v-runtime-template](https://github.com/alexjoverm/v-runtime-template) renders, you can listen to it's `updated` lifecycle hook: ```vue ``` Still don't trust me? Check it yourself in this [CodeSandbox](https://codesandbox.io/s/18r05pkmn7)!

The power of Snapshot Testing in Vue.js

Sun, 10 Mar 2019 11:00:00 GMT

If you are into testing, you probably have used [Jest](https://jestjs.io/): the all-in-one testing framework created by Facebook. Right now is the most popular tool out there and I've been using it since the first time I've tried it. To test Vue.js components, you also have [_vue-test-utils_](https://vue-test-utils.vuejs.org/) written by [Edd Yerburg](https://twitter.com/EddYerburgh), the official helper library that makes testing Vue.js apps easier. This is an example of tests using both Jest and vue-test-utils: ```js it('has a message list of 3 elements', () => { const cmp = createCmp({ messages: ['msg-1', 'msg-2', 'msg-3'] }) expect(cmp.is('ul')).toBe(true) expect(cmp.find('.message-list').isEmpty()).toBe(false) expect(cmp.find('.message-list').length).toBe(3) }) it('has a message prop rendered as a data-message attribute', () => { const cmp = createCmp({ message: 'Cat' }) expect(cmp.contains('.message')).toBe(true) expect(cmp.find('.message').props('message').toBe('Cat') expect(cmp.find('.message').attributes('data-message').toBe('Cat') // Change the prop message cmp.setProps({ message: 'Dog' }) expect(cmp.find('.message').props('message').toBe('Dog') expect(cmp.find('.message').attributes('data-message').toBe('Dog') }) ``` As you can see, _vue-test-utils_ gives you many methods you can use to check props, classes, content, search, etc. It gives you methods to change stuff, like `setProps`, which is pretty cool. This test has very specific assertions in the form of _"Find an element with a 'message' class and check if it has a 'data-message' set to 'Cat'"_. But what if I tell you that... you don't need to do that with Snapshot Testing? Basically, you can rewrite the previous tests by using snapshots in the following way: ```js it("has a message list of 4 elements", () => { const cmp = createCmp({ messages: ["msg-1", "msg-2", "msg-3"] }); expect(cmp.element).toMatchSnapshot(); }); it("has a message prop rendered as a data-message attribute", () => { const cmp = createCmp({ message: "Cat" }); expect(cmp.element).toMatchSnapshot(); cmp.setProps({ message: "Dog" }); expect(cmp.element).toMatchSnapshot(); }); ``` The value of the tests will remain the same, or it can have even more since sometimes you find non-related regressions in snapshots. Notice that in this test I've just used `toMatchSnapshot` for the assertions, and that's all. That makes testing much easier and quicker since you don't need to check every specific thing. The dynamics of testing changed: instead of writing specific assertions, you set the component state in any way you need and take snapshots of it. Snapshots are meant to assert the **rendering state**: they describe how the component is rendered given a specific state, and in later runs the snapshots are compared to check its validity. Keep in mind that not always snapshot testing is what you need. It depends on what you need to test. I can't fit more in a tip, but if you want more information you have the book _[Testing Vue.js Components with Jest](https://leanpub.com/testingvuejscomponentswithjest)_ where I added last week a whole section on snapshot testing, including: - Rethinking in Snapshots - Why, how and when to use snapshots - When not use them - Code examples Please tell me what you think about it! You can find me [on twitter](https://twitter.com/alexjoverm) 🙂

Two less known facts about Vuex

Sun, 03 Mar 2019 11:00:00 GMT

When using Vuex in our Vue.js components we tend to forget the amazing API that it exposes beside the mapping functions. Let's see what we can do with it, but first let's create a basic store for our examples: ```javascript const store = new Vuex.Store({ state: { count: 0 }, getters: { getCountPlusOne: state => state.count + 1 }, mutations: { increment(state) { state.count++; } } }); ``` ## Watch The watch method is the most useful to integrate Vuex with external code, be it in your `awesomeService` or in your `catchAllAuthUtils`. This is how to use it: ```javascript const unsubscribe = store.watch( (state, getters) => { return [state.count, getters.getCountPlusOne]; }, watched => { console.log("Count is:", watched[0]); console.log("Count plus one is:", watched[1]); }, {} ); // To unsubscribe: unsubscribe(); ``` What we are doing is to call the `watch` method with two functions, one to return what part of the state and/or getters we want to _keep an eye on_ and the other with the function that we want to invoke when `state.count` or `getCountPlusOne` change. This is extremely useful to integrate with react code or angular or even... JQuery! See the example in [this CodeSandbox](https://codesandbox.io/s/vm6r05qjq0). ## SubscribeAction Sometimes instead of watching a store property change it's more useful to react to a specific action, `login` and `logout` come in mind, vuex has us covered with `subscribeAction`. Calling subscribe adds a 'callback' that is run at every action and that we can use to call custom code. Let's use it to start and stop a global spinner before and after every action! ```javascript const unsubscribe = store.subscribeAction({ before: (action, state) => { startBigLoadingSpinner(); }, after: (action, state) => { stoptBigLoadingSpinner(); } }); // To unsubscribe: unsubscribe(); ```

Create an ImageSelect component on top of vue-multiselect

Sun, 24 Feb 2019 17:00:00 GMT

[Two tips before](https://vuedose.tips/tips/adaptive-components-using-v-bind-and-v-on) you learnt the concept of Adaptive Components and how you can build the base of it by proxifying props and events using `v-bind` and `v-on`. Now it's time to show it in action. By any chance, do you know about [vue-multiselect](https://vue-multiselect.js.org/)? It's an amazing select component built by [Damian Dulisz](https://twitter.com/damiandulisz). vue-multiselect can be used in many different ways given how flexible and customisable it is. That's really how a fine third-party component should be in order to be reusable. Based on [this example](https://vue-multiselect.js.org/#sub-custom-option-template) from its documentation, let's build an ImageSelect component. To do that, the example redefines some scoped slots that vue-multiselect exposes: ```vue ``` I'm not getting into scoped slots, just assume that code works in case you don't know about them. The thing here is that I want to build an `ImageSelect` component on top of that code. From the last tip, you probably know already that you need to use `v-bind="$props"` and `v-on="$listeners"` in order to make that proxifying of props and events happen. You also need to redeclare the props from the original vue-multiselect component, and you can take them from the MultiselectMixin of its source code: ```vue ``` Here's how you can use this `ImageSelect` component, passing by the minimal properties to make it work: ```vue ``` If you run this code you will notice that there is something not working properly. In particular the `show-labels` prop. The thing is that it's not a prop, but an attribute! And they're accessible through the `$attrs` component instance option. Basically we need to proxify not only the props, but also the attributes to make it work. To do that, I'm going to use a computed property to merge both `$props` and `$attrs` into the same object: ```vue ``` You can try yourself and run the code on [this Codesandbox example](https://codesandbox.io/s/n71oq781r0) I've prepared for you. You'll see it has some additional _Adaptive Components_, such as `SingleSelect` and `MultiSelect`. _Pss: they have some CSS tricks we'll cover on the next tips_

Creating a Store without Vuex in Vue.js 2.6

Sun, 17 Feb 2019 22:30:00 GMT

Vue.js 2.6 introduced some new features, and one I really like is the new global [observable API](https://vuejs.org/v2/api/#Vue-observable). Now you can create reactive objects outside the Vue.js components scope. And, when you use them in the components, it will trigger render updates appropriately. In that way, you can create very simple stores without the need of Vuex, perfect for simple scenarios like those cases where you need to share some external state across components. For this tip example, you're going to build a simple count functionality where you externalise the state to our own store. First create `store.js`: ```javascript import Vue from "vue"; export const store = Vue.observable({ count: 0 }); ``` If you feel comfortable with the idea of mutations and actions, you can use that pattern just by creating plain functions to update the data: ```javascript import Vue from "vue"; export const store = Vue.observable({ count: 0 }); export const mutations = { setCount(count) { store.count = count; } }; ``` Now you just need to use it in a component. To access the state, just like in Vuex, we'll use computed properties, and methods for the mutations: ```vue ``` If you want to try this example yourself, I've compiled for you in [this CodeSandbox](https://codesandbox.io/s/k3kpqz2wz7), go check it out! Remember you can read this tip [online](https://vuedose.tips/tips/creating-a-store-without-vuex-in-vue-js-2-6 ) (with copy/pasteable code), and don't forget to share [VueDose](https://vuedose.tips) with your colleagues, so they also know about these tips as well!

Adaptive components using v-bind and v-on

Sun, 10 Feb 2019 22:00:00 GMT

When you're working with component-based technologies, as soon as an application starts to grow, you need to structure and categorise your components in order to keep them as simple and maintainable as possible. Component composition it's a powerful pattern popular that helps reusing and structuring code in component-based technologies... But what the heck is component composition? Although being a generic concept, let's say that when you do component composition you're creating a component by the combination of one or more. One case could be when we have a base component, say `BaseList`, and you want to create a similar component with some additional functionality on top of it, like `SortableList`. I call them **Adaptive Components** (also proxy or wrapper components). When building an Adaptive Component, you usually want `SortableList` to keep the same API that the original `BaseList` in order to keep the components consistent. Which means that from `SortableList` you need to pass down all the props and listen to all events of `BaseList`. Here's the trick: you can do that by using `v-bind` and `v-on`: ```vue ``` The way `v-bind` works is basically the same than passing one by one all the properties to `AppList`, but instead passed all at once in an object. `$props` is the object in the component instance that contains all the properties of that component. As you can imagine, `v-on="$listeners"` works exactly the same way, but for events. This would work for two-way bound components using `v-model` as well. In case you didn't know, `v-model` is a shorthand for passing a `value` property and listening to a `input` event. Finally, remember that in Vue.js we have to explicitly declare the props of a component in order to be interpreted as such. A quick way to do that when building an Adaptive Component is to use the base component props to define them, like I do in `props: AppList.props`. That's it! Maybe you didn't see the practical use of the _Adaptive Components_? No worries, in the next tip I'll build a real case of an Adaptive Component so you can see it in action. Stay tuned!

How to use the new v-slot directive in Vue.js

Sun, 03 Feb 2019 20:00:00 GMT

I'm so excited to see how's people liking VueDose! I received amazing feedback about the performance tips published so far. I'm so grateful about the support and the compliments 🤗. Last week the version 2.6.0-beta.3 of Vue.js was released, enabling a new feature to simplify scoped slots even more. It introduces the new `v-slot` directive and its shorthand, as described in the [RFC-0001](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0001-new-slot-syntax.md) and [RFC-0002](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0002-slot-syntax-shorthand.md). In order to understand how it does simplify the syntax, let's see how's it in current scoped slots. Imagine you have a `List` the component that exposes a filtered list as its scope. The way you'd use that List scoped slot would be similar to: ```vue ``` The implementation of the List component is not too relevant, but in [this Codesandbox](https://codesandbox.io/s/wwzx6zw47w) you can check an example of it. With `v-slot`, you can write the scope of that slot directly on the component tag, avoiding an extra layer: ```vue ``` _Keep in mind `v-slot` can only be used on components and `template` tags, but not in plain HTML tags_ This makes the code more readable specially when you have nested scoped slots, which can be difficult to reason where a scope comes from. The `v-slot` directive also introduces a way to combine the `slot` and the `scoped-slots` directive, but by separating them with a colon `:`. For example, this example taken from [vue-promised](https://github.com/posva/vue-promised): ```vue ``` Could be written with `v-slot` as follows: ```vue ``` And to end up, `v-slot` has the symbol `#` as a shorthand, so the example before could be written as: ```vue ``` Just keep in mind that the shorthand for the default `v-slot` is `#default`. Are you excited about this new slot syntax?

Remove unused CSS with PurgeCSS

Sun, 27 Jan 2019 22:00:00 GMT

We can tackle web performance in different ways, and one of them is removing all JS and CSS we don't use in our apps. In the case of CSS, it's even more important when we use frameworks such as Bootstrap, Bulma or Tailwind, as well as when we're facing large or legacy applications. PurgeCSS is a tool that removes unused CSS by applying string comparison. That has some advantages, but also some caveats, so please keep attention to the white-listing part later. As an example, [VueDose's website](https://vuedose.tips) is built on Nuxt (static generated) using Tailwind, and it uses PurgeCSS to optimize the generated CSS. If I disable PurgeCSS, you can see that the tailwind css is **485 KB**: ![](/tips/remove-unused-css-with-purge-css/WithoutPurgeCSS-0156b9ea-8b09-40c5-b9c4-70a272b388ea.png) While if I activate it, it **goes down to 16 KB**: ![](/tips/remove-unused-css-with-purge-css/WithPurgeCSS-a335711a-4251-4915-b814-73ab9b1f61c0.png) PurgeCSS configuration can be different in each project. It can be set as a webpack plugin or a postcss plugin. In the case of VueDose, I'm using it as a postcss plugin. So I have a `postcss.config.js` file with this content: ```javascript const purgecss = require("@fullhuman/postcss-purgecss"); const plugins = [...]; if (process.env.NODE_ENV === "production") { plugins.push( purgecss({ content: [ "./layouts/**/*.vue", "./components/**/*.vue", "./pages/**/*.vue" ], whitelist: ["html", "body"], whitelistPatternsChildren: [/^token/, /^pre/, /^code/], }) ); } module.exports = { plugins }; ``` Basically, all you need is to tell where to look for the matching classes using the `content` property. Also, you'd like to _whitelist_ some classes or tags to don't be removed. You'll need to do that at least in `html` and `body`, as well as **any dynamic classes.** In my case, I use [prismjs](https://prismjs.com/) in order to highlight the code blocks, and it adds several `token` classes, as well as styles in the `pre` and `code` tags. In order to exclude them, I need to use the `whitelistPatternsChildren` property. Tailwind, additionally, needs a [custom extractor](https://tailwindcss.com/docs/controlling-file-size/#removing-unused-css-with-purgecss) in order to work properly with PurgeCSS. All in all, the whole `postcss.config.js` file for VueDose has the following content: ```javascript const join = require("path").join; const tailwindJS = join(__dirname, "tailwind.js"); const purgecss = require("@fullhuman/postcss-purgecss"); class TailwindExtractor { static extract(content) { return content.match(/[A-Za-z0-9-_:\/]+/g) || []; } } const plugins = [require("tailwindcss")(tailwindJS), require("autoprefixer")]; if (process.env.NODE_ENV === "production") { plugins.push( purgecss({ content: [ "./layouts/**/*.vue", "./components/**/*.vue", "./pages/**/*.vue" ], whitelist: ["html", "body"], whitelistPatternsChildren: [/^token/, /^pre/, /^code/], extractors: [ { extractor: TailwindExtractor, extensions: ["html", "vue"] } ] }) ); } module.exports = { plugins }; ``` That's it for today!

Measure runtime performance in Vue.js apps

Sun, 20 Jan 2019 22:00:00 GMT

In the [last tip](https://vuedose.tips/tips/1) we talked about how to improve performance in large lists. But still we haven't measure how much it really improved. We can do so by using the Performance tab in Chrome DevTools. But in order to have accurate data, we must **activate performance mode** on our Vue app. We can do that by setting the global, in our `main.js` file or in a plugin in the case of Nuxt: ```javascript Vue.config.performance = true; ``` Or if you have your `NODE_ENV` env variable set correctly, you could use it to set it in non-production environments: ```javascript const isDev = process.env.NODE_ENV !== "production"; Vue.config.performance = isDev; ``` That will activate the [User Timing API](https://developer.mozilla.org/en-US/docs/Web/API/User_Timing_API) that Vue uses internally to mark the components performance. From the last tip, I've created [this codesandbox](https://0ql846q66w.codesandbox.io/). Open it and hit the reload button from the performance tab on Chrome DevTools: ![](/tips/measure-runtime-performance-in-vue-js-apps/PerformanceTab-171255c6-d49e-4b76-b20d-138e5f5e2b58.png) That will record the page load performance. And thanks to the `Vue.config.performance` setting that you can see set on `main.js` you'll be able to see a _User Timing_ section on the profiling: ![](/tips/measure-runtime-performance-in-vue-js-apps/featured.png) In there, you'll find 3 metrics: - **Init**: time it takes to create the component instance - **Render**: time to create the VDom structure - **Patch**: time to apply the VDom structure to the real DOM Back to the curiosity, the results of the previous tip are the following: the normal component **takes 417ms to initalize:** ![](/tips/measure-runtime-performance-in-vue-js-apps/Reactive-65ff8639-2b5e-4275-ad75-855ea2e78988.png) While the non-reactive one using `Object.freeze` **takes 3.9ms**: ![](/tips/measure-runtime-performance-in-vue-js-apps/NoReactive-c4f316ac-11df-40b6-8a97-d1127b4cea43.png) Of course this can vary a little from run to run, but still the difference must be quite huge. Since the reactivity issue happens when the component is created, you'll see that difference in the _init_ part of the _Reactive_ and _NoReactive_ components. That's it! Remember you can read this [tip online](https://vuedose.tips/tips/measure-runtime-performance-in-vue-js-apps) (with copy/pasteable code) and please share [VueDose](https://vuedose.tips/) with all your colleagues if you liked it! See you next week.

Improve performance on large lists in Vue.js

Sun, 13 Jan 2019 21:00:00 GMT

Hi there! And welcome to the very first VueDose tip! I'm really stocked to start this adventure on VueDose and help devs like you learn some badass tricks. VueDose's tips are going to be very concise, and that's the format I believe people find more useful. So let's go straight to the point. Usually we have the need of fetching a list of objects, say users, items, articles, whatever... And sometimes, we don't even need to modify them, just to display them or having them in our global state (a.k.a. Vuex). A simple code for fetching that list would be something like: ```javascript export default { data: () => ({ users: {} }), async created() { const users = await axios.get("/api/users"); this.users = users; } }; ``` Vue by default makes reactive every first-level property for each object in the array. That can be expensive for large arrays of objects. Yeah, sometimes those lists are paginated, but others you just might have that list in the frontend. That's usually the case with Google Maps markers, which in fact are huge objects. So, in these cases, we can gain some performance if we prevent Vue from making reactive that list. And we can do that by using `Object.freeze` to the list before adding it to the component: ```javascript export default { data: () => ({ users: {} }), async created() { const users = await axios.get("/api/users"); this.users = Object.freeze(users); } }; ``` Keep in mind that the same applies to Vuex: ```javascript const mutations = { setUsers(state, users) { state.users = Object.freeze(users); } }; ``` By the way, if you need to modify the array, you can still do it by creating a new array. For instance, in order to add an item, you can do it in this way: ```javascript state.users = Object.freeze([...state.users, user]); ``` Are you wondering how much is the **performance improvement?** We'll see it in the next tip, so stay tuned! That's it for today! I hope you like this first tip 😛. Remember you can read this [tip online](https://vuedose.tips/tips/improve-performance-on-large-lists-in-vue-js) (with copy/pasteable code) and please share [VueDose](https://vuedose.tips/) with all your colleagues if you liked it!

How we built our blog as a full-static site with Nuxt, Storyblok and TailwindCSS

Tue, 25 Aug 2020 15:25:16 GMT

This is not just a guide for learning how to create a blog with modern technologies such as Nuxt, Storyblok and TailwindCSS. It's also not another tutorial where the author creates a random pet project to show concepts out of the blue. This is a story. The story that tells **how we built VueDose 2.0,** this very site you're reading on. In other words, a production-ready and finely thought out website from design to development. You'll go through this story yourself by creating step by step *NarutoDose*: a smaller and funnier version of VueDose but themed with Naruto characters. You'll learn to: - Use Nuxt in it's brand new full-static mode for best SEO and max performance - Organize UI components in Vue based on a Design System - Structure and work with the blog articles, authors and data using Storyblok - And much more! *Psst: this story wouldn't have been written without the help of [Storyblok](https://www.storyblok.com/developers?utm_source=newsletter&utm_medium=logo&utm_campaign=vuedose), a beloved VueDose sponsor* 💚