[Vue] Build Vue.js Apps with the Vue-CLI and Nuxt.js

Posted 2020-08-22 Answer1215

The vue-cli allows you to easily start up Vue projects from the command line while Nuxt.js enables a page-based routing system that follows your file structure. Combine these two projects and you‘ll have a Vue app created from scratch deployed in a matter of minutes.

 

Install:

npm i -g vue-cli

 

Setup:

vue init nuxt/starter basic-vue-proejct

cd vue-basic-project
yarn

 

Run:

npm run dev

 

Nuxt.js has already server-side rendering setup, which is pretty cool!

 

A basic two way binding:

<template>
  <section class="container">
    <h1 class="title">
      {{message}}
    </h1>
    <input v-model="message">
    <router-link class="button" to="/about">
      About page
    </router-link>
  </section>
</template>

<script>
  export default {
    data(){
      return {
        message: "Hello World!"
      }
    }
  }
</script>

 

Github