How To Create User Management App in Vue.js 3 Using Local Storage

In this tutorial, we will learn how to create a user management app in Vue.js 3 using local storage. User management is an essential feature in many web applications, and Vue.js provides a simple and elegant way to handle user data.

Setting Up the Environment

First, make sure you have Node.js and npm installed on your machine. You can check by running the following commands in your terminal:

    
      node -v
      npm -v
    
  

If you don’t have Node.js and npm installed, you can download and install them from the official website.

Once you have Node.js and npm installed, you can create a new Vue.js project by running the following command in your terminal:

    
      npx @vue/cli create user-management-app
    
  

When prompted, select Vue 3 as the version and choose the default options for the rest of the setup.

Creating the User Management App

Once the project is set up, navigate to the project directory and open it in your code editor. Inside the src directory, create a new file called user.js to define the user data structure and methods to interact with local storage:

    
      export default {
        getUsers() {
          return JSON.parse(localStorage.getItem('users')) || [];
        },
        addUser(user) {
          const users = this.getUsers();
          users.push(user);
          localStorage.setItem('users', JSON.stringify(users));
        },
        // Add other methods for updating and deleting users
      };
    
  

Next, create a new file called UserList.vue inside the src/components directory to display the list of users:

    
      <template>
        <div>
          <h2>User List</h2>
          <ul>
            <li v-for="user in users" :key="user.id">{{ user.name }}</li>
          </ul>
        </div>
      </template>

      <script>
        import user from '@/user.js';

        export default {
          data() {
            return {
              users: user.getUsers(),
            };
          },
        };
      </script>
    
  

Finally, create a new file called AddUserForm.vue inside the src/components directory to add new users:

    
      <template>
        <form @submit.prevent="addUser">
          <input v-model="name" type="text" placeholder="Enter name">
          <button type="submit">Add User</button>
        </form>
      </template>

      <script>
        import user from '@/user.js';

        export default {
          data() {
            return {
              name: '',
            };
          },
          methods: {
            addUser() {
              user.addUser({ id: Date.now(), name: this.name });
              this.name = '';
            },
          },
        };
      </script>
    
  

Testing the App

To test the app, add the UserList and AddUserForm components to the App.vue file and run the Vue.js development server:

    
      <template>
        <div id="app">
          <user-list />
          <add-user-form />
        </div>
      </template>

      <script>
        import UserList from './components/UserList.vue';
        import AddUserForm from './components/AddUserForm.vue';

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

Now, open your web browser and navigate to http://localhost:8080 to see the user management app in action. You can add and view users, and their data will be stored locally in your browser’s local storage.

Congratulations! You have successfully created a user management app in Vue.js 3 using local storage. You can further enhance the app by adding features such as updating and deleting users, authentication, and more.