Nuxt Cheat Sheet

Nuxtjs Templates. Download the best Nuxt.js Themes & templates developed by Creative Tim. Join over 92 creatives that already love our bootstrap resources! Nuxt.js Cheatsheet We’ve included the shortcuts for the most commonly used aspects of Storyblok with Nuxt.js. Our cheat sheet is available in pdf A4 format. Before we start with our Nuxt Js Cheat Sheet, lets learn about Nuxt. Nuxt.js is a free and open source web application framework based on Vue.js, Node.js, Webpack and Babel.js. The framework is advertised as a 'meta-framework for universal applications' Lets look at some of the essentials in Nuxt. Nuxt.js supports generating a static website based on your Vue application. It is the 'best of both worlds' as you don't need a server but still have SEO benefits because Nuxt will pre-render all pages and include the necessary HTML. Also, you can deploy the resulting page easily to Netlify or GitHub pages. Spread the love Related Posts JavaScript Cheat Sheet — Operators and DatesJavaScript is one of the most popular programming languages for web programming. In this article, Better JavaScript — Loops and ArraysLike any kind of apps, JavaScript apps also have to be written well. Otherwise, we JavaScript Cheat Sheet — Errors and StringsJavaScript is one of the most popular programming.

Nuxt Cheat Sheet
Vue Mastery Nuxt Cheat Sheet

HTML Cheat Sheet

Some simple command to generate HTML code in Visual Studio Code

<div></div>	<a href=”http://”></a>
<img src=”” alt=””/>	<form action=””></form>
<input type=”text” name=”” id=”” />	<input type=”email” name=”” id=”” />
<input type=”password” name=”” id=”” />	<button></button>
<meta http-equiv=”Content-Type” content=”text/html;charset=UTF-8″ />	<style></style>
<script></script>	<script src=”” ></script>
<iframe src=”” frameborder=”0″></iframe>	< label for=”” ></label>
<ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>	<!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″ /> <title>Document</title> </head> <body></body> </html>

Check out more cheat sheet @ Emmet
Check out TailwindCSS @ TailwindCSS.com

NuxtJS Cheat Sheet

SPA vs UNIVERSAL

SPA ( Single Page Application )
Benefit: Organize the project using convention over configuration folder structure and config files. Easy development server.

UNIVERSAL – Recommended
Benefit:All pages get pre-rendered into HTML and have a high SEO and page load score. The content is generated at build time.

Starting a new project ( Command Prompt / Terminal ) Coconut vowels.

npx create-nuxt-app </project-name>
cd </project-name>
npm install
npm run dev

Folder Structure

assets – Place your CSS, images, svg and etc here.
static – Place icons, static files like robots.txt here.
components – Create different components for app usage
layouts – Application layouts
middleware – Custom functions where we want to intercept before accessing a page
pages – Application views & routes from which the router is dynamically generated
plugins – Javascript plugins run before Vue.js init
store – Vuex store files ( state, getters, mutations & actions )

Nuxt Cheat Sheet

Components & Pages
<template> & </template> Types of oil paint brushes and their uses. is a must.

Navigating between page
Use <nuxt-link to=””> page-name </nuxt-link> instead of <a href=””></a>. Hyperlink a will affect the vuex store while navigate to different page.

Vue Mastery Nuxt Cheat Sheet

Check out more about NuxtJS @ NuxtJS.org