Build Vue.js Apps with the Vue-CLI and Nuxt.js
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.
[00:00] Start by installing globally the vue-cli, then with a vue-cli installed, you can say vue init. The template I want to use is the nuxt starter project that's on GitHub at nuxt/starter, and my local directly will be called basic-vue-project. I'll just accept the defaults for the config to navigate into that directory.
[00:23] I just need to npm install or yarn install, then, I can simply npm run dev, and this will launch a server on port 3000. With this server running on 3000, it renders an index page, and I'll click to go to the About Page. You'll see the About Page is loaded from the client, but when you refresh, it's loaded from the server.
[00:44] You get automatic server side rendering with Nuxt. To show the code for this, go into the pages directory, open index, and this represents what's on the home page. If I delete all of this and say, template>div>h1 and Hello world, then, you'll just see the Hello world with the styling included in the starter template.
[01:08] You can start coding up the context of this, export default, and I'll add some data in there. Data is a function that returns an object. I'll say this message is, 'My awesome message', drop the message inside of Hello world, hit save, and now, I get My awesome message.
[01:31] I can bind this to an input. Say v-model is my "message", hit save again. Now when I type in here, you see the change is reflected. I can easily add a route using router-link to the "/about" page, hit save. I'll call this About, hit save again. You'll see we get this router link with some default styling provided by the template project.
[02:00] When I click, I go to the About Page. I can edit this one which represents this page, select it all, say template>div>h2>This is the about page. When I hit save I have an about page, and I can navigate back to my home page. This works so well with the now project.
[02:22] When I come to my terminal and simply type now, since I already have now installed, it will deploy it, run the build, and then pm start. This link it's generating and serving on the now servers, which I'll just open in a new tab here. It will be this exact same project with Vue, and navigation, and server side rendering, and everything already setup.
[02:45] Here's my local copy and my remote copy.