Blog Posts from 2020

Browse all blog posts from 2020

Posts from 2020

28 posts published in 2020

2020 - my most successful year (career wise)
A look back at what we could say has been an interesting year, challenging in many ways yet somehow has been my most successful year to date.
1 min read
- personal
Creating a Nuxt Module
Modules are functions that are called sequentially when booting Nuxt. The framework waits for each module to finish before continuing. In this way, modules can customize almost any aspect of your project. Nuxt modules can be incorporated into npm packages. This makes them easy to reuse across projects and to share with the community.
1 min read
- nuxt
How we use Nuxt at The NuxtJS Company
The first commit for Nuxt.js on Github was made on October 26th, 2016. Since then the Nuxt.js framework has grown from 2 creators in 2016 to having 10 full-time employees at the NuxtJS company, as well as the amazing Nuxt community with maintainers, ambassadors and contributors.
1 min read
- nuxt
Vue Directives
Vue Directives are a great way of doing things like trimming your models or only showing something once. So many cool directives to make your life easier when coding in Vue.
1 min read
- vue
- nuxt
Formatting a date in JavaScript
How to format a date in JavaScript without using any libraries so you easily display dates in your Vue or Nuxt application
1 min read
- javascript
Advanced i18n in Nuxt using Interpolations
That's where i18n interpolation comes into practice. With i18n, instead of using v-html we can instead use interpolation. How? i18n gives us an <i18n> component that we can use on any of our pages or inside our components.
1 min read
- nuxt
- vue
Being an Extrovert in a Virtual World
From being surrounded by amazing people to being locked up from the world. 2020 has been an interesting year and a very hard one for those who are extroverts and love being around people.
1 min read
- personal
CityJSConf talks to…Debbie O’Brien
“I guess you could say I love the buzz of the stage but also because my talks help people learn something new. Now the virtual world is not the same at all, but what can we do? I don’t dislike it — I would just prefer to see and talk to people. I am very much a people’s person.”
1 min read
- personal
Why static sites are back
When we first built websites many years ago they were very static. It was all we knew. Html with some CSS and a tiny bit of JavaScript. A typical website from 1996, SpaceJam which really shows how static sites are.
1 min read
- jamstack
The JavaScript Array.Map() method
The .map() method in JavaScript lets you loop over every element in an array and modify or add to it and then return a different element to take that elements place
1 min read
- javascript
Adding a cookie consent banner
When in Europe and using cookies we need to show a cookie consent banner so our users are aware that we are using cookies on the site.
1 min read
- nuxt
Setting up cypress
Let's take a look at how you setup Cypress in your Nuxt.js project, setup a github action for continuous integration so that Netlify will run the tests every time your application is building.
1 min read
- nuxt
- testing
Fetching graphQL queries
Fetching graphQL queries
1 min read
- nuxt
Migrating to Nuxt content
If you already have documentation set up and would like to migrate to Nuxt Content then this guide should help you make migrate easily and take advantage of what the docs theme gives you.
1 min read
- nuxt
Using Apollo to Fetch Data
Using Apollo to Fetch Data from a GraphQL API
1 min read
- nuxt
Create a Blog with Nuxt Content
The content module is a git files based headless CMS that provides powerful features when it comes to write blogs, documentation sites or just adding content to any regular website. In this post we will go through most of the benefits of this module and discover how we can create a blog with it.
1 min read
- nuxt
Styling your active classes in Nuxt.js
Nuxt.js, which uses `vue-router`, can easily tell what route you are on and therefore can add a class to that link when the user is on that page. By default this class is called `nuxt-link-active`.
1 min read
- nuxt
Adding a PWA in Nuxt.js
Most people don't realise how easy it really is to add a PWA with Nuxt.js. Progressive Web Apps (PWA) deliver native-like capabilities, reliability, and installability while reaching anyone, anywhere, on any device with a single codebase.
1 min read
- nuxt
- performance
Advanced i18n in Nuxt using Interpolations
With Nuxt components you can auto import your components really easily and even comes with support for dynamic imports otherwise known as lazy loading. That means you can just add your component in the template without having to add it to the script tag. This makes development much faster.
1 min read
- nuxt
Moving from @nuxtjs/dotenv to runtime config
In our frontend applications, we often use APIs and third-party integrations which require us to use configuration data which is usually provided by environment variables. These variables should not be exposed to the frontend as the browser environment is accessible by all visitors.
1 min read
- nuxt
Going dark with Nuxt.js color mode
The @nuxtjs/color-mode module is a cool way of adding dark mode to your site. But not only does it switch from dark to light but also any color theme (eg sepia mode). It even has auto detection so that it will choose the right mode depending on your system appearance.
1 min read
- nuxt
ignoring your files with Nuxt.js
In Nuxt.js there are 3 different ways to ignore files during the build phase. This is great for static site generation which means you can still generate your site with a broken page as it will be ignored.
1 min read
- nuxt
Creating an error page in Nuxt.js
An error page is the page you see when you arrive at a page that can't be found. These are typically called 404 pages. To create an error page all you need to do is create an `error.vue` file in your layouts folder. Layouts?
1 min read
- nuxt
Configure the Nuxt.js server to see your site on your mobile
Sometimes you want to test out your site on your actual mobile device or tablet and not just in the dev tools. This is great when bug fixing or just to see how it looks in a real environment.
1 min read
- nuxt
Show a message when your user is offline with $nuxt.isOffline
Did you know that `$nuxt.isOffline` can be used to show your users content based on if they are online or not.
1 min read
- nuxt
The Nuxt Loading Progress Bar
Nuxt.js automatically gives you a loading progress bar component which is shown between routes. Did you know you can customise it, disable it or create your own component?
1 min read
- nuxt
Let's Analyze your webpack bundles with Nuxt
As we add so many third party libraries to our site sometimes we forget that perhaps they are going to have an impact on our performance or sometimes we just don't read the install instructions and install the whole library instead of only what we need.
1 min read
- nuxt
- performance
Page and Layout Transitions in Nuxt.js
With Nuxt.js it is really easy to add transitions between your pages. You can create transitions for all your pages or layouts and you can even have different transitions for specific pages.
1 min read
- nuxt

Browse by Topic

Browse by Year

Explore posts from different years

Click any year to browse posts from that period