Welcome to my blog

Vue

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.

October 27, 2020

JavaScript

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

October 27, 2020

Lifestyle

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.

October 27, 2020

JavaScript

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

October 27, 2020

Nuxt

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.

October 27, 2020

Nuxt Cypress

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.

October 27, 2020

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`.

October 27, 2020

Nuxt PWA

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.

October 27, 2020

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.

October 27, 2020

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?

October 27, 2020

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.

October 27, 2020

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.

October 27, 2020

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?

October 27, 2020

Nuxt webpack

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.

October 27, 2020

Nuxt

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.

October 27, 2020

Welcome to my blog

Vue Directives

Formatting a date in JavaScript

Being an Extrovert in a Virtual World

The JavaScript Array.Map() method

Adding a cookie consent banner

Setting up cypress

Styling your active classes in Nuxt.js

Adding a PWA in Nuxt.js

ignoring your files with Nuxt.js

Creating an error page in Nuxt.js

Configure the Nuxt.js server to see your site on your mobile

Show a message when your user is offline with $nuxt.isOffline

The Nuxt Loading Progress Bar

Let's Analyze your webpack bundles with Nuxt

Page and Layout Transitions in Nuxt.js