Categories
Vue 3

Vue 3 — Props Data Flow

Vue 3 is the up and coming version of Vue front end framework.

It builds on the popularity and ease of use of Vue 2.

In this article, we’ll look at how to use props with Vue 3.

One-Way Data Flow

Props have a one way downward binding between the parent and child component.

When the parent property updates, then the updates are passed into the child via props.

This prevents child components from accidentally mutating the parent’s state.

And this makes our app easier to understand.

We should never mutate props.

If we need to change their value, then we should assign them to a new property first.

For instance, if we need to change the value of an initial value that’s set with the prop’s value, then we should assign that to a state first.

So we should write:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>App</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="app">
      <counter :initial-count="5"></counter>
    </div>
    <script>
      const app = Vue.createApp({}); app.component("counter", {
        props: ["initialCount"],
        data() {
          return {
            count: this.initialCount
          };
        },
        template: `
          <div>
            <button @click='count++'>increment</button>
            <p>{{count}}</p>
          </div>
        `
      }); app.mount("#app");
    </script>
  </body>
</html>

We have the initialCount prop that we use to set the initial value of count state in the counter component.

Then we can do whatever we like with it.

If the value needs to be transformed, then we can put it in as a computed property.

For instance, we can write:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>App</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="app">
      <counter :initial-count="5"></counter>
    </div>
    <script>
      const app = Vue.createApp({}); 
      app.component("counter", {
        props: ["initialCount"],
        data() {
          return {
            count: this.initialCount
          };
        },
        computed: {
          doubleCount() {
            return this.count * 2;
          }
        },
        template: `
          <div>
            <button @click='count++'>increment</button>
            <p>{{doubleCount}}</p>
          </div>
        `
      }); app.mount("#app");
    </script>
  </body>
</html>

We have the initial-count prop which is transformed to doubleCount by returning this.count * 2 .

Now we don’t have to do anything with the prop value itself.

And we just change the state to what we want within the data method and the computed property in the counter component.

Prop Validation

We can validate props by check its data type and more.

We set the the props property’s value to a constructor.

Or we can validate it with a function.

For example, we can write:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>App</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="app">
      <blog-post v-for="post of posts"></blog-post>
    </div>
    <script>
      const app = Vue.createApp({
        data() {
          return {
            posts: [{ author: "james", likes: 100 }]
          };
        }
      });
      app.component("blog-post", {
        props: {
          title: {
            type: String,
            default: "default title"
          }
        },
        template: `<p>{{title}}</p>`
      });
      app.mount("#app");
    </script>
  </body>
</html>

Then we get the ‘default title’ text displayed since we never passed in value to the title prop.

default has the default value.

validator has the validator function for props.

For example, we can write:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>App</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="app">
      <blog-post v-for="post of posts" type="news"></blog-post>
    </div>
    <script>
      const app = Vue.createApp({
        data() {
          return {
            posts: [{ author: "james", likes: 100 }]
          };
        }
      });
      app.component("blog-post", {
        props: {
          type: {
            validator(value) {
              return ["news", "announcement"].indexOf(value) !== -1;
            }
          }
        },
        template: `<p>{{type}}</p>`
      });
      app.mount("#app");
    </script>
  </body>
</html>

to add a validator for the type prop.

The validator method is run when we pass in the prop with the given name.

The value is the value that we pass in.

So if we pass in something other than 'new' or 'announcement' like:

<blog-post v-for="post of posts" type="foo"></blog-post>

then we’ll get a warning.

We can also add the required property and set it to true to make a prop required like:

prop: {
  type: String,
  required: true
}

Conclusion

We can validate props with constructors and validation functions.

Also, we can add the default property to set the default value of a prop.

Categories
Vue 3

Vue 3 — More Complex Props

Vue 3 is the up and coming version of Vue front end framework.

It builds on the popularity and ease of use of Vue 2.

In this article, we’ll look at how to use props with Vue 3.

Passing a Number

We can pass in numbers to props.

For instance, we can write:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>App</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="app">
      <blog-post v-for="post of posts" :likes="post.likes"></blog-post>
    </div>
    <script>
      const app = Vue.createApp({
        data() {
          return {
            posts: [{ title: "hello world", author: "james", likes: 100 }]
          };
        }
      }); 
      app.component("blog-post", {
        props: {
          likes: Number
        },
        template: `<p>{{likes}}</p>`
      }); 
      app.mount("#app");
    </script>
  </body>
</html>

to create the blog-post component that takes the likes prop.

likes is a number, so we’ve to put the : before the likes to let us pass in an expression.

We can also pass in a number literal:

<blog-post :likes="100"></blog-post>

Passing a Boolean

To pass in a boolean, we can write:

<blog-post is-published></blog-post>

to pass in true to the is-published prop.

To pass in false , we’ve write out the whole expression:

<blog-post :is-published='false'></blog-post>

And we can pass in other expressions.

Passing an Array

We can pass in an array literal as a prop value.

So we can write:

<blog-post :comment-ids="[1, 2, 3]"></blog-post>

or we can write:

<blog-post :comment-ids="post.commentIds"></blog-post>

Passing an Object

Vue props can take objects.

So we can write:

<blog-post
  :author="{
    firstName: 'james',
    lastName: 'smith'
  }"
></blog-post>

We pass in an object to the author prop.

The : tells Vue that the object isn’t a string.

We can also pass in another expression that returns an object.

Passing the Properties of an Object

To pass in the properties of an object as props, we can use the v-bind without the argument.

For example, we can write:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>App</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="app">
      <blog-post v-for="post of posts" v-bind="post"></blog-post>
    </div>
    <script>
      const app = Vue.createApp({
        data() {
          return {
            posts: [{ title: "hello world", author: "james", likes: 100 }]
          };
        }
      }); 
      app.component("blog-post", {
        props: {
          title: String,
          author: String,
          likes: Number
        },
        template: `
          <div>
            <h1>{{title}}</h1>
            <p>author: {{author}}</p>
            <p>likes: {{likes}}</p>
          </div>
        `
      }); 
      app.mount("#app");
    </script>
  </body>
</html>

Then the properties of post will be passed into blog-post as prop values.

The property names are the prop names.

This is a shorthand for:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>App</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="app">
      <blog-post
        v-for="post of posts"
        :title="post.title"
        :author="post.author"
        :likes="post.likes"
      ></blog-post>
    </div>
    <script>
      const app = Vue.createApp({
        data() {
          return {
            posts: [{ title: "hello world", author: "james", likes: 100 }]
          };
        }
      }); 
      app.component("blog-post", {
        props: {
          title: String,
          author: String,
          likes: Number
        },
        template: `
          <div>
            <h1>{{title}}</h1>
            <p>author: {{author}}</p>
            <p>likes: {{likes}}</p>
          </div>
        `
      }); 
      app.mount("#app");
    </script>
  </body>
</html>

As we can see, it’s much longer and a lot more repetitive than the shorthand.

Conclusion

We can pass in various kinds of data easily with Vue components.

We just need to use v-bind or : for short.

Categories
Vue 3

Vue 3 — Component Events

Vue 3 is the up and coming version of Vue front end framework.

It builds on the popularity and ease of use of Vue 2.

In this article, we’ll look at how to listen to component events.

Listening to Child Components Events

We can listen to child components within the parent component.

Our child component has to emit the event so that the parent component can listen to it.

For instance, we can write:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>App</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="app">
      <div :style="{ 'font-size': `${fontSize}px` }">
        <todo-item
          @enlarge-text="fontSize++"
          v-for="t of todos"
          :todo="t"
          :key="t.id"
        ></todo-item>
      </div>
    </div>
    <script>
      const app = Vue.createApp({
        data() {
          return {
            fontSize: 15,
            todos: [
              { id: 1, name: "eat" },
              { id: 2, name: "drink" },
              { id: 3, name: "sleep" }
            ]
          };
        }
      }); 
      app.component("todo-item", {
        props: ["todo"],
        template: `
          <div>
            <p>{{ todo.name }}</p>
            <button @click="$emit('enlarge-text')">
              Enlarge text
            </button>
        </div>
        `
      }); 
      app.mount("#app");
    </script>
  </body>
</html>

We created a todo-item component with an ‘enlarge text’ button.

When we click it, the $emit function is run.

The argument is the event name.

Then in the parent component that holds the todo-item component, we have the @enlarge-text directive so that we can listen to the enlarge-text event that’s emitted from todo-item .

When that event is received, when we increase fontSize by 1.

Since we set fontSize as the font size of our div, then font size change will be applied across all the child elements.

Emitting a Value With an Event

The $emit function takes a second argument with the value we want to emit with the event.

Therefore, we can modify our code to pass the value into the $emit function.

Then we get the value emitted from the $event object.

For instance, we can write:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>App</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="app">
      <div :style="{ 'font-size': `${fontSize}px` }">
        <todo-item
          @enlarge-text="fontSize += $event"
          v-for="t of todos"
          :todo="t"
          :key="t.id"
        ></todo-item>
      </div>
    </div>
    <script>
      const app = Vue.createApp({
        data() {
          return {
            fontSize: 15,
            todos: [
              { id: 1, name: "eat" },
              { id: 2, name: "drink" },
              { id: 3, name: "sleep" }
            ]
          };
        }
      }); 

      app.component("todo-item", {
        props: ["todo"],
        template: `
          <div>
            <p>{{ todo.name }}</p>
            <button @click="$emit('enlarge-text', 1)">
              Enlarge text
            </button>
          </div>
        `
      }); 
      app.mount("#app");
    </script>
  </body>
</html>

$emit takes a second argument that we emit with the enlarge-text event.

Now in the parent component, we get the value emitted with the $event variable.

In this case, $event is set to 1 since that’s what we emitted.

We changed the @enlarge-text ‘s value so that the fontSize updates from the $event instead of a constant value.

Also, we can put the expression we passed into @enlarge-text into a method.

This is handy if we have more code.

For instance, we can write:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>App</title>
    <script src="[https://unpkg.com/vue@next](https://unpkg.com/vue@next)"></script>
  </head>
  <body>
    <div id="app">
      <div :style="{ 'font-size': `${fontSize}px` }">
        <todo-item
          @enlarge-text="onEnlargeText"
          v-for="t of todos"
          :todo="t"
          :key="t.id"
        ></todo-item>
      </div>
    </div>
    <script>
      const app = Vue.createApp({
        data() {
          return {
            fontSize: 15,
            todos: [
              { id: 1, name: "eat" },
              { id: 2, name: "drink" },
              { id: 3, name: "sleep" }
            ]
          };
        },
        methods: {
          onEnlargeText(amount) {
            this.fontSize += amount;
          }
        }
      }); 

      app.component("todo-item", {
        props: ["todo"],
        template: `
          <div>
            <p>{{ todo.name }}</p>
            <button @click="$emit('enlarge-text', 1)">
              Enlarge text
            </button>
        </div>
        `
      }); 
      app.mount("#app");
    </script>
  </body>
</html>

We changed @enlarge-text ‘s value to our onEnlargeText method.

amount would be automatically set to the $event variable’s value, which is 1.

So we get the same result.

Conclusion

We can listen to the child component’s events from the parent.

This way, we can pass data from child to parent.

Categories
Vue 3

Vue 3 — Component Basics

Vue 3 is the up and coming version of Vue front end framework.

It builds on the popularity and ease of use of Vue 2.

In this article, we’ll look at how to create simple Vue 3 components.

Components

Components are reusable Vue instances with a name.

For instance, we can create a component by writing:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>App</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="app">
      <button-counter ></button-counter>
    </div>
    <script>
      const app = Vue.createApp({}); 
      app.component("button-counter", {
        data() {
          return {
            count: 0
          };
        },
        template: `
          <div>
            <button @click="count--">
              decrement
            </button>
            <p>{{ count }}</p>
          </div>
        `
      }); 
      app.mount("#app");
    </script>
  </body>
</html>

We create a component with a button and a p element.

When we click the button, the count is decrement, and the value is displayed in the p element.

Then we used the button-counter element in the app’s template.

We can reuse the component multiple times.

For instance, we can write:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>App</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="app">
      <button-counter></button-counter>
      <button-counter></button-counter>
      <button-counter></button-counter>
    </div>
    <script>
      const app = Vue.createApp({}); 
      app.component("button-counter", {
        data() {
          return {
            count: 0
          };
        },
        template: `
          <div>
            <button @click="count--">
              decrement
            </button>
            <p>{{ count }}</p>
          </div>
        `
      }); 
      app.mount("#app");
    </script>
  </body>
</html>

Now we have 3 instances of the button-counter component.

They all have their own template and state.

Organizing Components

We got to organize our components well since we’ll probably have many of them in an app.

We can put them in a tree.

So we divide our app into small components we nest components to build what we want.

Passing Data to Child Components with Props

Our previous example didn’t have any way to get data from a parent component.

However, Vue 3 provides us with a way to pass data from parent to child with props.

Props are custom attributes that we can register on a component.

When a value is passed into the prop attribute, it becomes a property of the component instance.

For instance, we can create a component that takes props and use it by writing:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>App</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="app">
      <blog-post title="hello world"></blog-post>
    </div>
    <script>
      const app = Vue.createApp({}); 
      app.component("blog-post", {
        props: ["title"],
        template: `<h1>{{ title }}</h1>`
      }); 
      app.mount("#app");
    </script>
  </body>
</html>

We create the blog-post component with the title prop so that we can display it on the template.

The props property has an array of strings of the prop names.

Having that means we registered that props to be allowed to be passed into our component.

A component can have as many props as we want.

If we have an array of data, we can use the v-for directive to render them.

For example, we can write:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>App</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="app">
      <todo-item v-for="t of todos" :todo="t" :key="t.id"></todo-item>
    </div>
    <script>
      const app = Vue.createApp({
        data() {
          return {
            todos: [
              { id: 1, name: "eat" },
              { id: 2, name: "drink" },
              { id: 3, name: "sleep" }
            ]
          };
        }
      }); 

      app.component("todo-item", {
        props: ["todo"],
        template: `<p>{{ todo.name }}</p>`
      }); 
      app.mount("#app");
    </script>
  </body>
</html>

to render an array with components.

We have the todo-item component with the todo prop registered.

The template property rendered the name property of the array.

todo-item is used with v-for to render the todo items.

We pass in the todo value with the todo prop with :todo='t' and do the same with the key prop.

The key prop is used to let Vue identify each element uniquely.

Conclusion

We can create our own components with the app.component method so that we can divide our Vue app into manageable pieces.

Categories
Express MongoDB Nodejs Vue 3

Create a Full Stack Web App with the MEVN Stack

The MEVN stack is a set of technologies for full-stack apps.

MEVN stands for MongoDB, Express, Vue.js, and Node.js

In this article, we’ll take a look at how to create a simple todo app with authentication with the MEVN stack.

Setting Up the Project

The first step to create a full-stack MEVN app is to set up the project.

First, we create a project folder, then add the backend and frontend folders inside it.

backend has the Express app.

frontend has the Vue.js app. We’ll use Vue 3 for the front end.

Next, to create our Express app, we run the Express Generator to create the files.

To do this, go into the backend and run:

npx express-generator

We may need admin privileges to do this.

Next, we go into the frontend folder.

We install the latest version of the Vue CLI by running:

npm install -g @vue/cli

Vue CLI 4.5 or later can create Vue 3 projects.

Then in the frontend folder, we run:

vue create .

Then we choose the ‘Vue 3 (default)’ option.

Next, we have to install the packages.

We stay in the frontend folder and run:

npm i axios vue-router@4.0.0-beta.12

to install the Axios HTTP client and Vue Router 4.x, which is compatible with Vue 3.

In the backend folder, we run:

npm i cors momgoose jsonwebtoken

to install the CORS and Mongoose packages to enable cross-domain communication and work with MongoDB.

jsonwebtoken lets us add JSON web token authentication into our app.

Create the Back End

Now we’re ready to create the back end app to work with MongoDB and add authentication.

First, we create db.js in the backend folder and add:

const { Schema, createConnection } = require('mongoose');
const connection = createConnection('mongodb://localhost:27017/mevn-example', { useNewUrlParser: true });

const userSchema = new Schema({
  name: String,
  password: String
});

const User = connection.model('User', userSchema);

const todoSchema = new Schema({
  name: String,
  done: Boolean,
  user: { type: Schema.Types.ObjectId, ref: 'User' },
});

const Todo = connection.model('Todo', todoSchema);

module.exports = {
  User,
  Todo
}

We connect to the MongoDB database with Mongoose and create the models.

To create the models, we use the Schema constructor to create the schema.

We add the properties and their data types.

The user property references the Object ID from the User model so that we can link the todo entry to the user.

Then we call connection.model to use the schema to create the model.

Then, we create constants.js in the backend folder and write:

module.exports = {
  SECRET: 'secret'
}

We put the secret for the JSON web token into this file and use them in the route files.

Next, we go into the routes folder and add the files for the API routes.

We create todos.js in the routes folder and write:

var express = require('express');
var router = express.Router();
const { Todo } = require('../db');
const jwt = require('jsonwebtoken');
const { SECRET } = require('../constants');

const verifyToken = (req, res, next) => {
  try {
    req.user = jwt.verify(req.headers.authorization, SECRET);
    return next();
  } catch (err) {
    console.log(err)
    return res.status(401);
  }
}

router.get('/', verifyToken, async (req, res) => {
  const { _id } = req.user;
  const todos = await Todo.find({ user: _id })
  res.json(todos);
});

router.get('/:id', verifyToken, async (req, res) => {
  const { _id } = req.user;
  const { id } = req.params;
  const todo = await Todo.findOne({ _id: id, user: _id })
  res.json(todo);
});

router.post('/', verifyToken, async (req, res) => {
  const { name } = req.body;
  const { _id } = req.user;
  const todo = new Todo({ name, done: false, user: _id })
  await todo.save()
  res.json(todo);
});

router.put('/:id', verifyToken, async (req, res) => {
  const { name, done } = req.body;
  const { id } = req.params;
  const todo = await Todo.findOneAndUpdate({ _id: id }, { name, done })
  await todo.save();
  res.json(todo);
});

router.delete('/:id', verifyToken, async (req, res) => {
  const { id } = req.params;
  await Todo.deleteOne({ _id: id })
  res.status(200).send();
});

module.exports = router;

The verifyToken middleware has the jwt.verify method to verify the token with our SECRET key.

If it’s valid, we set the req.user to the decoded token.

Then we call next to call the router handlers.

Then we have the GET / route to get the user data from req.user and then call Todo.find to find the todo entries for the user.

Todo is the model we created earlier.

The GET /:id route gets the Todo entry by the ID.

findOne gets the first result in the todos collection.

req.params gets the URL parameters from the URL parameter.

Then POST / route gets the name from the req.body property, which has the request body daya.

And we get the _id property from the req.user property to get the user data.

We use both to create the todo entry.

user has the Object ID for the user.

The PUT /:id route is used to update the user.

We get the name and done from req.body , which has the request body.

req.params has the id property which has the ID of the todo entry.

We use the id to find the todo entry.

And update the name and done property to update the entry.

Then we call todo.save() to save the data.

The DELETE /:id route lets us delete a todo entry by its ID.

We call deleteOne with the _id to do that.

The verifyToken will make sure the token is valid before we run the route handlers.

req.headers.authorization has the auth token. req.headers has the HTTP request headers.

Next, we create users.js in the routes folder and write:

var express = require('express');
var router = express.Router();
const bcrypt = require('bcrypt');
const { User } = require('../db');
const { SECRET } = require('../constants');
const jwt = require('jsonwebtoken');
const saltRounds = 10;

router.post('/register', async (req, res) => {
  const { name, password } = req.body;
  const existingUser = await User.findOne({ name });
  if (existingUser) {
    return res.json({ err: 'user already exists' }).status(401);
  }
  const hashedPassword = await bcrypt.hash(password, saltRounds);
  const user = new User({
    name,
    password: hashedPassword
  })
  await user.save();
  res.json(user).status(201);
});

router.post('/login', async (req, res) => {
  const { name, password } = req.body;
  const { _id, password: userPassword } = await User.findOne({ name });
  const match = await bcrypt.compare(password, userPassword);
  if (match) {
    const token = await jwt.sign({ name, _id }, SECRET);
    return res.json({ token });
  }
  res.status(401);
});

module.exports = router;

It’s similar to the todos.js .

We have the POST /register route to get the name and password properties from the JSON request body.

Then we check if the user with the given name exists.

Then we get the bcrypt.hash to hash the password with the secret.

And then we save the user with the name and then hashedPassword.

The POST /login route gets the name and password from the JSON request body.

We use the bcrypt.compare method to compare the password.

Then we create the token and return it in the response if validation is successful.

Otherwise, we send a 401 response.

Finally, we bring everything together in app.js in the backend folder.

We replace what’s there with:

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
var cors = require('cors')

var todorouter = require('./routes/todo');
var usersRouter = require('./routes/users');

var app = express();
app.use(cors())
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/todos', todorouter);
app.use('/users', usersRouter);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

// render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

We add the cors middleware so that we can communicate with the front end.

We have the todorouter and usersRouter to add the routes to our app.

Vue 3 Front End

Now that we finished the back end, we work on the front end.

First, in the components folder, we create TodoForm.vue and write:

<template>
  <div>
    <h1>{{ edit ? "Edit" : "Add" }} Todo</h1>
    <form @submit.prevent="submit">
      <div class="form-field">
        <label>Name</label>
        <br />
        <input v-model="form.name" />
      </div>
      <div>
        <label>Done</label>
        <input type="checkbox" v-model="form.done" />
      </div>
      <div>
        <input type="submit" value="Submit" />
      </div>
    </form>
  </div>
</template>

<script>
import axios from "axios";
import { APIURL } from "../constants";

export default {
  name: "TodoForm",
  data() {
    return {
      form: { name: "", done: false },
    };
  },
  props: {
    edit: Boolean,
    id: String,
  },
  methods: {
    async submit() {
      const { name, done } = this.form;
      if (!name) {
        return alert("Name is required");
      }
      if (this.edit) {
        await axios.put(`${APIURL}/todos/${this.id}`, { name, done });
      } else {
        await axios.post(`${APIURL}/todos`, { name, done });
      }
      this.$router.push("/todos");
    },
    async getTodo() {
      const { data } = await axios.get(`${APIURL}/todos/${this.id}`);
      this.form = data;
    },
  },
  beforeMount() {
    if (this.edit) {
      this.getTodo();
    }
  },
};
</script>

We have a form to let us add or edit to todo entries.

It takes the edit prop to indicate whether we’re editing a todo or not.

We use v-model to bind the inputs to the reactive properties.

Then we check for the this.edit value.

If it’s true , we make a PUT request with the id of the todo entry.

Otherwise, we make a POST request to create a new todo entry.

The getTodo method lets us get the todo by the ID when we’re editing.

Next, in the src folder, we create the views folder to add the route components.

We create the AddTodoForm.vue file and add:

<template>
  <div>
    <TodoForm></TodoForm>
  </div>
</template>

<script>
import TodoForm from "@/components/TodoForm";

export default {
  components: {
    TodoForm,
  },
};
</script>

We register the TodoForm component and render it in the template.

Next, we create the EditTodoForm.vue in the views folder and add:

<template>
  <div>
    <TodoForm edit :id='$route.params.id'></TodoForm>
  </div>
</template>

<script>
import TodoForm from "@/components/TodoForm";

export default {
  components: {
    TodoForm,
  },
};
</script>

We pass the edit and id props into the TodoForm so it can get todo entry by ID.

$route.params.id has the Object ID of the todo entry.

Next, we create the Login.vue file in the views folder to add a login form.

In this file, we add:

<template>
  <div>
    <h1>Login</h1>
    <form @submit.prevent="login">
      <div class="form-field">
        <label>Username</label>
        <br />
        <input v-model="form.name" type="text" />
      </div>
      <div class="form-field">
        <label>Password</label>
        <br />
        <input v-model="form.password" type="password" />
      </div>
      <div>
        <input type="submit" value="Log in" />
        <button type="button" @click="$router.push('/register')">
          Register
        </button>
      </div>
    </form>
  </div>
</template>

<script>
import axios from "axios";
import { APIURL } from "../constants";

export default {
  data() {
    return {
      form: { name: "", password: "" },
    };
  },
  methods: {
    async login() {
      const { name, password } = this.form;
      if (!name || !password) {
        alert("Username and password are required");
      }
      try {
        const {
          data: { token },
        } = await axios.post(`${APIURL}/users/login`, {
          name,
          password,
        });
        localStorage.setItem("token", token);
        this.$router.push("/todos");
      } catch (error) {
        alert("Invalid username or password.");
      }
    },
  },
};
</script>

We have a form that takes the username and password and let the user log in.

When we submit the form, the login method is called.

In the method, we check if the name and password have values.

If they both are nonempty, we proceed with making the login request.

If it succeeds, we go to the /todos route.

Otherwise, we should an error message.

Similarly, we create Register.vue component for the registration form.

Then we fill it with the following code:

<template>
  <div>
    <h1>Register</h1>
    <form @submit.prevent="register">
      <div class="form-field">
        <label>Username</label>
        <br />
        <input v-model="form.name" type="text" />
      </div>
      <div class="form-field">
        <label>Password</label>
        <br />
        <input v-model="form.password" type="password" />
      </div>
      <div>
        <input type="submit" value="Register" />
        <button type="button" @click="$router.push('/')">Login</button>
      </div>
    </form>
  </div>
</template>

<script>
import axios from "axios";
import { APIURL } from "../constants";

export default {
  data() {
    return {
      form: { name: "", password: "" },
    };
  },
  methods: {
    async register() {
      const { name, password } = this.form;
      if (!name || !password) {
        alert("Username and password are required");
      }
      try {
        await axios.post(`${APIURL}/users/register`, {
          name,
          password,
        });
        alert("Registration successful");
      } catch (error) {
        alert("Registration failed.");
      }
    },
  },
};
</script>

We get the username and password the same way.

If they’re both non-empty, then we make a request to the register route.

Once that succeeds, we show a success message.

Otherwise, we show a failure message, which is in the catch block.

Next, we have a component to show the todo items.

We create Todo.vue in the views folder and write:

<template>
  <div>
    <h1>Todos</h1>
    <button @click="$router.push(`/add-todo`)">Add Todo</button>
    <button @click="logOut">Logout</button>
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Done</th>
          <th>Edit</th>
          <th>Delete</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="t of todos" :key="t._id">
          <td>{{ t.name }}</td>
          <td>{{ t.done }}</td>
          <td>
            <button @click="$router.push(`/edit-todo/${t._id}`)">Edit</button>
          </td>
          <td>
            <button @click="deleteTodo(t._id)">Delete</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import axios from "axios";
import { APIURL } from "../constants";

export default {
  data() {
    return {
      todos: [],
    };
  },
  methods: {
    async getTodos() {
      const { data: todos } = await axios.get(`${APIURL}/todos`);
      this.todos = todos;
    },
    async deleteTodo(id) {
      await axios.delete(`${APIURL}/todos/${id}`);
      this.getTodos();
    },
    logOut() {
      localStorage.clear();
      this.$router.push("/");
    },
  },
  beforeMount() {
    this.getTodos();
  },
};
</script>

<style scoped>
th:first-child,
td:first-child {
  width: 60%;
}

th {
  text-align: left;
}
</style>

We have the Add Todo button that goes to the add-todo route when we click it.

This will be mapped to the AddTodoForm.vue component.

The Logout button calls the logOut method when it’s clicked.

It just clears local storage and redirect the user to the login page.

The getTodos method gets the todo entries for the user.

The user identity is determined from the decoded token.

The v-for directive renders the items and display them.

The Edit button goes to the edit form.

And the Delete button calls deleteTodo when we click it.

deleteTodo makes a DELETE request to the todos route.

We call getTodos after deleting a todo entry or when we load the page.

Next in src/App.vue , we add our router-view to show the route:

<template>
  <router-view></router-view>
</template>

<script>
export default {
  name: "App",
};
</script>

<style>
.form-field input {
  width: 100%;
}

#app {
  margin: 0 auto;
  width: 70vw;
}
</style>

Then we create constants.js in the src folder and add:

export const APIURL = 'http://localhost:3000'

to let us use the APIURL everywhere so that we don’t have to repeat the base URL for the back end API when we make requests.

Finally, in main.js , we write:

import { createApp } from 'vue'
import App from './App.vue'
import { createRouter, createWebHashHistory } from 'vue-router';
import Login from '@/views/Login';
import Todo from '@/views/Todo';
import Register from '@/views/Register';
import AddTodoForm from '@/views/AddTodoForm';
import EditTodoForm from '@/views/EditTodoForm';
import axios from 'axios';

axios.interceptors.request.use((config) => {
  if (config.url.includes('login') || config.url.includes('register')) {
    return config;
  }
  return {
    ...config, headers: {
      Authorization: localStorage.getItem("token"),
    }
  }
}, (error) => {
  return Promise.reject(error);
});

const beforeEnter = (to, from, next) => {
  const token = localStorage.getItem('token');
  if (token) {
    next()
    return true;
  }
  next({ path: '/' });
  return false
}

const routes = [
  { path: '/', component: Login },
  { path: '/register', component: Register },
  { path: '/todos', component: Todo, beforeEnter },
  { path: '/add-todo', component: AddTodoForm, beforeEnter },
  { path: '/edit-todo/:id', component: EditTodoForm, beforeEnter },
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

const app = createApp(App);
app.use(router);
app.mount('#app')

to add the vue-router and the Axios request interceptor to add the auth token for authenticated routes.

beforeEnter is a route guard that lets us restrict access for authenticated routes.

We check if the token is present before we redirect the user to the page they’re going to.

Otherwise, we redirect to the login page.

routes has all the routes. path has the route URLs an component has the component we want to load.

beforeEnter is the route guard that loads before the route loads.

createRouter creates the router object.

createWebHashHistory lets us use hash mode for URLs.

So URLs will have the # sign between the base URL and the rest of the URL segments.

Then we call app.use(router) to add the router and make the this.$route and thuis.$router properties available in components.

Now we can run npm run serve from the frontend folder and node bin/www to start the back end.

Conclusion

We can create a simple MEVN stack app with the latest JavaScript frameworks and features without much trouble.