{"id":22199,"date":"2020-10-19T16:35:45","date_gmt":"2020-10-19T16:35:45","guid":{"rendered":"http:\/\/introducing_cloudinary_s_nuxt_module"},"modified":"2020-10-19T16:35:45","modified_gmt":"2020-10-19T16:35:45","slug":"introducing_cloudinary_s_nuxt_module","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/introducing_cloudinary_s_nuxt_module","title":{"rendered":"Introducing Cloudinary's Nuxt Module"},"content":{"rendered":"

Since its initial release in October 2016 by the Chopin brothers as a server-side framework that runs on top of Vue.js, Nuxt (aka Nuxt.js) has gained prominence in both intuitiveness and performance. The framework offers numerous built-in features based on a modular architecture, bringing ease and simplicity to web development.\nNot surprisingly, Nuxt.js has seen remarkable growth in adoption by the developer community along with accolades galore. At this writing, Nuxt has earned over 30K stars on GitHub<\/a> and 96 active modules<\/a> with over a million downloads per month<\/a>. And the upward trend is ongoing.<\/p>\n

\"Nuxt<\/p>\n

This post describes the benefits Nuxt affords modern web development and the procedures for uploading and optimizing media files in Nuxt with its new Cloudinary module.<\/p>\n

What Benefit Does Nuxt Offer?<\/h2>\n

By eliminating code distribution of server and client, Nuxt offers a straightforward and intuitive project-starter template:<\/p>\n

yarn create nuxt-app your-project-name\n<\/code><\/pre>\n
Conveniently, you can configure your project settings while installing Nuxt, for example:<\/p>\n
\"new<\/p>\n
Nuxt\u2019s built-in, folder-based routing system automates the generation of routes.<\/p>\n
\"Structure\nStructure of the Nuxt Project Template<\/em><\/p>\n
Also, with a few codelines, you can output your project\u2019s codebase as regular server-side rendering, as a full static site, or as a single-page application (SPA), like this:<\/p>\n
\/* nuxt.config.js *\/\nexport default {\n mode: 'universal', \/\/ or 'spa'\n target: 'static', \/\/ for static site generation\n}\n<\/code><\/pre>\n
That\u2019s not all. Read on for three more amazing capabilities offered by Nuxt.<\/p>\n
SEO Improvements<\/h3>\n
Unlike regular SPAs, Nuxt\u2019s SPA build mode combines the server side\u2019s auto pre-generating the static content before sending it back to the browser as static markup. Such a step reduces loading time while enabling Google to crawl the site at ease.<\/p>\n
Full Static Site (Jamstack) Rendering With Nuxt SPA<\/h3>\n
To keep up with the Jamstack trend<\/a>, Nuxt introduced a while ago the nuxt generate<\/code> command with smart build-caching, which is probably the most significant innovation move in the framework\u2019s history. That command does the following:<\/p>\n