Why Nuxt Js is perfect framework for your next landing page?

Krutie Patel
codeburst
Published in
9 min readDec 12, 2017

Let me give you a small introduction of my project before I begin. It’s called Pariksha.

What is Pariksha?

Pariksha is the result of my 8 years of experience in online learning industry.

I have authored Compliance, Corporate and Vocational Trainings using various authoring tools, Wordpress plugins and LMSs (Learning Management System).

Most LMS and Wordpress plugins provide one-click-at-a-time method of creating quiz assessments and they are bulky with so many features that nobody ever uses.

I wanted to change that.

So I created Pariksha — Bitesize eLearning Platform, where you can import questions in bulk via Excel and create quiz within seconds.

Pariksha is coming soon. Next phase of Pariksha is to create minimalistic dashboard for users before it’s launched.

But in the meantime, I wanted to have a landing page up and running.

This is Pariksha written in Hindi language using Devanagari script. It is pronounced as PUH-RICK-SHA. And it means test.

This is my account of how I created three versions of the same landing page, and why I believe Nuxt Js is the most suitable framework to achieve high quality static or dynamic websites.

First Landing Page

Dev stack for first version:

CSS Framework: Bulma
Hosting: Heroku (setup as Node Js App)
Version Control: Heroku + GitLab
Domain Management: Hover

Very first landing page was built with simplicity of Bulma using text, logo, subscription form, one-minute video demonstration and a link to @_Pariksha Twitter.

I had Google Analytic integrated and minor SEO efforts put in.

Here’s the copy of first version as it was hosted on Surge, http://pariksha.surge.sh/. I had this vanilla landing page running for about first two weeks of November. And I also got one subscriber who wasn’t my friend!

Landing Page — Version 1

With that micro-success, I decided to give visitors more than a video demonstration of this flashcard application.

I began identifying problems with this version to kick start the revision.

Key issues identified…

There were many problems with first version, and there was lot of room for improvements; but the timing was important first time around and I had to publish basic webpage while I come up with something interesting.

The first issue I noticed, the time spent on the landing page was in seconds! People spent less than a minute on website and disappeared, because there was very little to view, read or interact on a page.

I started brainstorming ways to increase the time spent on the landing page. And I came up with the following what-ifs:

  1. What if visitors can test flashcards?
    …this’ll give visitors an activity to participate in and really engage with the concept of Pariksha.
  2. What if I can test different segments without being obvious?
    …probably this will help segment data when someone expresses interest for early access.
  3. What if I can increase content links on a landing page?
    …content is the king they say, and would certainly help increase time-spent on site. And also, this will improve sitemap structure which eventually will help increase the site visibility and crawl-ability.

Everything is different the second time around

Dev stack for second version:

Js Framework: Vue Js
Animation Library: Greensock TweenMax
CSS Framework: Bootstrap

Hosting: Heroku (setup as Node Js App)
Version Control: Heroku+ GitLab
Domain Management: Hover

I started building second version of landing page using traditional Vue Js App setup.

The app followed component-based application structure, where the root component - Pariksha - served as an entry point.

Vue Components Sketch

Quiz list would generate unique URL for each flashcard quiz, which will ultimately be a part of the sitemap.

In the process of creating static flashcard quiz, I realised that visitors were far away from the subscription form that was situated on a home page. That led me to create contextualised EOI (Expression of Interest) form at the end of each flashcard quiz.

By this time, I had addressed all three issues I realised previously.

After that, I created dynamic Twitter share link based on the quiz metadata and converted that into Vue Component to re-use anywhere within the site.

Here’s the copy of second version of landing page that is hosted on Surge — http://heavy-frog.surge.sh/#/

I was in a much better place after second version was deployed and live. Whatever was done after this point was a bonus!

Why did I need third revision?

With Vue app, the performance of the landing page was snappy and the website looked almost perfect, but I wasn’t happy with few things like,

  • Fixed title and description tags in the head element of the page
  • URLs had # appearing in them
  • Landing page didn’t cache assets like data, images, css, js, html, etc

Head Element

Although, App-sneak-peek looked as pretty and functional as expected, the site had one fixed index page head element for all site pages.

Clean URL

Default URL generated by Vue Router comes with # in it. Using mode: ‘history’ didn’t quite work out because when data wasn’t available, the app would try to use catch-all fall-back route that sent users back on index.html.

This didn’t serve the purpose of sharing direct quiz-link on social media.

Caching Assets

In addition to the clean URLs and custom head element, I started looking for ways to probably cache frequently used assets, such as, CSS, images, js, data, etc to improve the app performance.

My ideas of a landing page were leaning towards Progressive Web App.

So, I started reading about dynamic head element, progressive web application, SSL implementation, URL redirection, Nuxt Js, Structured Data and schema.org.

Second version may have run for another week before I made the decision to revise things and re-create it differently.

Introducing Nuxt Js ❤

The key benefit of Nuxt Js is the server side rendering, but I was rather sold on the following advantages before considering this framework for my coming-soon page:

  1. Nuxt Js comes bundle with vue-meta to manage header and html attributes, which provided dynamically populated meta tags
  2. Automagically generated vue-router configuration (for both basic and dynamic routes) gave me clean URLs
  3. Cleaner way of creating & organising custom plugins and modules (Google Analytics, TweenMax Animations and Transitions)
  4. Selective loading of CSS and JS using the powerful head() object
  5. State management to share data within web application

Another three reasons for choosing Nuxt Js for landing page were,

  • this Vue based site was basically a public facing website, and required no login/registration to view the content,
  • the SEO friendly features were essential for this project, and
  • according to my research, I was pretty sure by now that Nuxt Js would help me build Progressive Web App.

Unaware of PWA previously, I already had some features taken care of in second version as below,

  • Correctly sized content for the viewport
  • Site worked cross-browser
  • Provided grand user experience when opened on big screens, but also performed well on medium and smaller devices
  • URL for each page (with #, but still…)
  • TweenMax animation looked smooth as you start answering quiz questions
  • Contextualised Twitter share link and Share-Your-Score link

Apart from that, what really made PWA tick was HTTPS redirection, Service Worker registration, splash-screen during initial load when accessed as an app and caching.

Third time pays for all

Dev stack for third version:

Js Framework: Nuxt Js
Animation Library: Greensock TweenMax
CSS Framework: Bootstrap 4

Hosting: Heroku (setup as Node Js App)
SSL: Let’s Encrypt
Version Control: Heroku + GitLab
Domain Management: Hover

Third version of the site wasn’t just minor improvements on the existing code-base, but it was rather complete re-basing of Nuxt Js site onto current Vue site.

In terms of Heroku, it was little challenging. Because current Heroku App was remotely connected with Vue App and the new project had different local Nuxt Js directory structure.

When I learned Git commands couple of years ago, I never thought I would need to rebase or create an orphan branch! But this was the perfect use-case for these two commands.

Thinking in PWA

The decision to create PWA made me think a lot about the site structure, ease of navigation when accessed as an app, responsiveness and site performance.

I went through the checklist of PWA as published by Google and started tackling each remaining feature one by one.

I reused existing code-base and started converting Vue Js app into Nuxt Js app.

The fundamental differences here were,

  • Previously called Vue mixins, directives and filters turned into Nuxt plugins
  • The way CSS, JS, modules and plugins were loaded was different
  • Use of fetch() method to fill the store before page rendering and the data was available universally within app
  • Use of head() method to populate head elements

Revisiting (Dynamic) Head Element and clean URL

With few extra attributes added in the data object, I had dynamic head element populated with the help of vue-meta.

Dynamic route configuration powered by Vue Router provided clean and unique URL for each quiz without #.

Structured Data

I wanted to customise structured data based on the quiz content and have full control over the data being used for SEO. Vue mounted life-cycle hook helped populate dynamic Structured Data.

Structured Data from pariksha.io index page

Helper Packages

Core Nuxt Js framework is very light-weight. But Nuxt-Community has developed some of the best packages to compliment your progressive web application.

  1. Redirect-SSL…encouraged me to implement complimentary Heroku SSL (with Let’s Encrypt) and configured appropriate URL redirection to always serve the site over SSL.
  2. Nuxt PWA — …helped support key PWA features, such as,
    — Registering Service Worker Js
    — Prompt to install the web app on mobile devices
    — Customising Workbox-build to cache assets
  3. Nuxt Sitemap — … enabled sitemap xml generation on the fly during project building phase

Individually, each effort was little on its own, but auditing the site on Google Lighthouse resulted into 100% PWA for all site pages!

PWA Score using Audit Tool — Google Lighthouse

P stands for Progressive in PWA

Since PWA is progressive in itself, concept of Service Worker isn’t supported on every device at the time of writing this. So, here’s what I learned about Pariksha Landing Page,

  • At the moment, after you install the web app on your mobile/tablet device, app will still need an internet to serve.
  • Android device opens the app instantly without loading it afresh from the web, while iPhone doesn’t.
  • Android device renders splash-screen perfectly, while iPhone doesn’t.
  • Chrome browser prompts user to install the web app upon visiting the landing page for the first time, while Safari doesn’t.

Best Viewed on tablet and desktop

Although the site renders and performs just fine on small devices, I recommend using tablet or desktop to experience the beauty of TweenMax/CSS3 animations.

For now, I’m very content with the progress. Here’s how the latest version of landing page looks like at https://www.pariksha.io

https://www.pariksha.io

PWA is the future of web applications and framework like Nuxt Js is a good place to start for website project like this.

Nuxt Js allowed my idea to grow into an interesting landing page feature and helped me break-free from traditional WordPress websites.

I hope to share more on how I go from here. And Thank you so much for reading about my work.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

Published in codeburst

Bursts of code to power through your day. Web Development articles, tutorials, and news.

Responses (12)

What are your thoughts?

Great write up! What was the reason for switching to Bootstrap after Bulma?

27

Very well written Krutie! You made me think of exploring Nuxt now!

11

As said by others, Great write up. No tedious over explaining or getting smart. Straight to the core and highlighting what you were trying to achieve. I will now look into Nuxt. Thank you :)

5