Vue to Vuex to Nuxt whats next

After Wes Bos teaching me how to build react apps the frontend-focus newsletter had the most trending js projects for 2016.

Top of the list was Vuejs so I decided to transform my new knowlegde into Vuejs. I needed a backend, firebase was nice but without data in there. Since I turned my bone-cms into a json-service for a quick and that time dirty - now state of the art content delivery - for a migrating shishabrand.com to shopify without copying content.

There was an api that was waiting for requests. Now serving 15000 Image-Nodes with just some lines of vue-code.

I wanted a fast site navigable by thumb

I'am a mobile fan and really wanted to have a fast and easy to use site with a app-like experience.

To achieve this I had keep the initially loaded code small, so I couldn't use any css-framework, I had to move away from swiping libraries to native browser scrolling with a bit of transitional sugar. In the end I managed to keep the initial js at 56K and css at 3K.

Since IOS added the doubletab-home-button shifting down the screen It should have been clear to everyone the nav has to be in reach of thumb. I decided to put it fixed bottom, apparently nobody does that - I don't know why.

SEO shock

// I once said "who is not known by google is not invited on job-interview"

Yesterday a friend asked me for a SEO-job. Best thing to push your self by a little google ego-search but I got terrified by a rank of 15 and a snipped showing only a disqus error - Ok I thought google crawler and single-page-applications were friends already but I was wrong.

Rescuing my self from getting lost in the teens or twens of google results was not a big step ahead.

It pushed me forward to the next step on my non existing roadmap of js-framework-discovery : server-side-rendering

Nuxt

I red about nuxt the last weeks, the vuejs-newsletter talks about it every week.

On the first view it looks like ripping apart the whole application but in the end it is just moving a bit in structure.

For my routing it was even an upgrade.

I had a component routing the catch-all-route that now moved into a nuxt-page, what made it feel right.

Some mounted callbacks moved to fetch callbacks.

My main.js got structured into plugins called in the nuxt.config.js.

I cleaned up my vuex-store to have only structured data and not objects with functionality any more that can get lost by the nuxt populating it on the first request.

So next step will be a nice deployment since I am pulling from git at the moment.

I never had a 99% on PageSpeed Insights, and I never thought I would get it with a page fully packed with js libraries.

the happy end

5 days after nuxifying my site I got back on the first page of google results by query "Kai Rautenberg"