Image for post
Image for post
Photo by Fatos Bytyqi on Unsplash

Creating a ToDo App with a MEVN Full Stack (Part 1)

Creating Your Project

mkdir client
mkdir server

Setting Up Your Vue Frontend

vue init webpack client
Image for post
Image for post
cd client
npm install
npm run dev
Image for post
Image for post
<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {

}
}
}
</script>
<style>
</style>

Setting Up Your Backend

{
"name": "server",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"keywords": [],
"description": ""
}
"scripts": {
"start": "./node_modules/nodemon/bin/nodemon.js src/app.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
npm install --save express body-parser cors morgan
Image for post
Image for post
Your file structure for server (hopefully)
// import dependencies
const express = require('express')
const bodyParser = require('body-parser')
const cors = require('cors')
const morgan = require('morgan')
const app = express() // create your express app// make app use dependencies
app.use(morgan('dev'))
app.use(bodyParser.json())
app.use(cors())
app.listen(process.env.PORT || 8081) // client is already running on 8080
// import dependencies
const express = require('express')
const bodyParser = require('body-parser')
const cors = require('cors')
const morgan = require('morgan')
const app = express() // create your express app// make app use dependencies
app.use(morgan('dev'))
app.use(bodyParser.json())
app.use(cors())
app.get('/todo', (req, res) => {
res.send([
'Thing 1',
'Thing 2'
])
})
app.listen(process.env.PORT || 8081) // client is already running on 8080

Routing to Your First Page

<template lang="html">
<div>
<ul>
<li>
Hello World
</li>
</ul>
</div>
</template>
<script>
export default {
}
</script>
<style lang="css"></style>
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import ToDo from '@/components/ToDo'
Vue.use(Router)export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
{
path: '/todos',
component: ToDo
}
]
})

Using Axios to Connect Client and Server

import axios from 'axios'export default() => {
return axios.create({
baseURL: `http://localhost:8081/` // the url of our server
})
}
import API from '@/services/API'export default {
getToDos () {
return API().get('todo')
}
}
<template lang="html">
<div>
<ul>
<li v-for='todo in todos'>
<span>{{todo}}</span>
</li>
</ul>
</div>
</template>
<script>
import ToDoAPI from '@/services/ToDoAPI.js'
export default {
data () {
return {
todos: []
}
},
mounted () {
this.loadTodos()
},
methods: {
async loadTodos () {
const response = await ToDoAPI.getToDos()
this.todos = response.data
}
}
}
</script>
<style lang="css"></style>
Image for post
Image for post
Found at http://localhost:8080/#/todo

I run a VueJS community over at https://learnvue.co, develop web sites, and post whatever I find cool on the Internet.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store