:-:
.==-+:
.==. :+- .-=-
.==. :==++-+=.
:==. -**: :+=.
:+- :*+++. .++.
:+- -*= .++: .=+.
-+: =*- .+*: .=+:
Hello, I'd like to introduce you to Nuxt.js, a Javascript framework that can be used to create powerful full stack applications very quickly assembled with a wide variety of options while maintaining best practices and scalability.
With a few easy steps, you can get a production ready app in minutes, and Nuxt.js will automatically configure your app with provided options to essentially any specification. Let's take a look.
First, make sure you are familiar with HTML and Javascript fundamentals, because Nuxt.js is built on top of Vue.js another Javascript framework. Vue.js was created to allow javascript markup to co-exist with html, and uses a component based architecture to load new or updated information to the screen dynamically.
Vue.js solves the same problems that React does for front-end development, but in very different ways which means they could have different use cases in a variety of scenarios. It's ultimately up to you to decide which one is better suited to your needs, so hopefully this article will explain some pros and cons that Vue.js/Nuxt.js will have for your consideration, especially if you are already familiar with React.
To install, you can use NPM or Yarn, which will install the Nuxt.js package to your project folder.
npx -v
npx create-nuxt-app record-shop
When you run the create command, the console will prompt you with options for your app build specifications. You can choose a front end UI framework, server-side framework, middleware, routing, etc. Or you can click through and start from scratch, because Vue.js/Nuxt.js are designed to be open ended and versatile to suite any project. This trait also allows Vue.js apps to be integrated into an existing project with east.
For my demo, I chose the following settings:
? Project name Record Shop
? Project description
? Author name hartsean
? Choose programming language JavaScript
? Choose the package manager Npm
? Choose UI framework Bulma
? Choose custom server framework Fastify
Once you've chosen the settings the app will install. Once the app in installed type:
cd record-shop
npm run dev
Keep in mind that Vue is meant to be lightweight and un-configured for a reason, and that is to allow the developer complete control on deciding the structure and functionality of every asset of the application. For beginners or if you are seeking a more streamlined development process(Vue.js can be hard to set up from scratch) Nuxt.js fills that gap by optimizing Vue.js's native speed using pre-rendered html, and code splitting that loads only the needed javascript.
Nuxt.js is indexed by search, so will perform better in search engine's than a standard Vue.js build. It comes pre configured with Vue Router and Vue-meta, and Vuex, which are not included by default with Vue.
Vue also has no standard file structure, so Nuxt.js provides us with one as well. For routing, Nuxt.js gives you a pages folder, that will automatically set up routes when you place a single component file within it. Let's see how our build is doing in the console.
ℹ Preparing project for development 18:59:17
ℹ Initial build may take a while 18:59:17
✔ Builder initialized 18:59:17
✔ Nuxt files generated 18:59:17
✔ Client
Compiled successfully in 9.16s
✔ Server
Compiled successfully in 9.49s
ℹ Waiting for file changes 18:59:28
READY Server listening on http://localhost:3000 18:59:28
The app was generated and immediately available for development on my localhost. Time to add some code!
Top comments (1)
Please do continue ...