Power Up Your Vue Skill With Nuxt
Vue has been a popular JavaScript framework since 2014. Vue is designed to be easily adoptable with other libraries or existing projects. Vue is perfectly capable of powering sophisticated Single-Page Applications (SPA).
But, have you ever felt confused in structuring your Vue applications because Vue starter is too simple to begin with? or perhaps, have you ever countered a problem like how to deal with SEO in Vue SPA?
That’s when Nuxt comes in handy!! Nuxt will make you more confident with your Vue skill.
Why Nuxt?
Nuxt provides you a powerful modular architecture. This will make your development faster and easier. You don’t need to think about where to put your router, your components, etc. The starter project should be enough for you to start development. Below is what it looks like:
Assets
The assets directory is where you put your uncompiled assets such as styles, images, or fonts.
Components
The components directory is where you put all your components besides pages and layouts. Nuxt provides auto import feature, so you don’t need to import generic components in your pages or layouts.
Layouts
The layouts directory is where you put your layouts that don’t dynamically change. In example, header, footer and sidebar will be the same in every pages, so that is called layout.
Middleware
The middleware directory is where you put all your defined functions that can be run before rendering either page or layouts. In example, checking auth, user agents can be put here.
Pages
The pages directory is where you store your views and routes. Nuxt reads all the .vue files inside this directory and automatically creates the router configuration for you.
Plugins
The plugins directory is where you put Vue plugins to inject functions or constants.
Static
The static directory is where you put files that likely won’t be changed. All included files will be automatically served by Nuxt and are accessible through your project root URL. In example, robots.txt will be serve in host/robots.txt.
Store
The store directory is where you put Vuex Store files.
nuxt.config
This is where Nuxt is configured to cover most use cases.
The second “why”, is Nuxt makes SEO support a lot easier. Nuxt uses Server Side Rendering (SSR). SSR is the ability of an application to contribute by displaying the web-page on the server. That SSR makes predefined meta tags in your application can be seen by the search engine bot. Nuxt gives you an option to predefine meta tags for each page using the head method inside the Vue instance.
In every page and layout, like Vue components, you will have to define Vue instance, but the difference is the head method is available for you to set HTML elements in the <head> section. In the home.vue above, you can set the title tag and meta tags with attribute that you desire.
The third “why”, is what I have stated above in pages directory, “automatically creates router”. In Vue, you have to define your own router one by one. In Nuxt, you just have to simply put .vue files in pages directory, then Nuxt will have it ready for you.
As you can see, by having products directory inside pages, makes you have a routes /products which will access index.vue inside products directory. For dynamic routes, you just have to name .vue files starting with _. In example above, _slug.vue will let you receive dynamic parameters (slug) in that route. Accessing /products/something-good or /products/something-better will let Nuxt read _slug.vue file which can read something-good or something-better as parameter.
Summary
I have been using this Nuxt for more than a year and I already love it. It is so simple and the starter project is already enough for you to start development. If you only need SPA and don’t need a complicated SEO support, Vue is the answer. But if you want to build more complex application, you can power up your Vue application with Nuxt.
Indonesian version of this article.
You can check out more about Nuxt yourself.
