Introduction to NuxtJS
Get acquainted with NuxtJS and learn about setting up the configuration file for a Nuxt project.
We'll cover the following...
The Nuxt framework combines all the benefits of the Vue front-end library with the benefits of server-side rendering.
The SPA below renders a simple Nuxt page that shows the text “Hello World” at the center of the browser’s screen. Notice how the App.vue component has the same definition as any other component in Vue.
<template>
<div class="container">
<h2>Hello World</h2>
</div>
</template>
<script setup>
</script>
<style>
.container {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.container h2 {
font-size: 48px;
font-family: Nunito Sans,sans-serif;
text-align: center;
}
</style>Hello World application built using NuxtJS
Customizing the config file
The Nuxt config file ...
