Build a Simple Vue.js Interactive Web-Based Bookmarking App: A Beginner’s Guide

Written by

javascriptdebugged

in

In today’s digital world, we’re constantly bombarded with information. Finding and revisiting valuable content can feel like searching for a needle in a haystack. This is where a bookmarking app comes in handy. Imagine being able to save your favorite articles, websites, and resources in one organized place, accessible with a few clicks. This tutorial will guide you through building a simple, yet functional, web-based bookmarking application using Vue.js. This project is perfect for both beginners and intermediate developers looking to solidify their understanding of Vue.js fundamentals while creating something practical.

Why Build a Bookmarking App?

Bookmarking apps solve a common problem: information overload. They allow you to:

  • Organize your online discoveries: Keep track of interesting articles, tutorials, and websites.
  • Access information quickly: Easily revisit saved resources without having to search again.
  • Learn and practice: This project provides a hands-on experience with Vue.js, covering concepts like components, data binding, event handling, and local storage.

By building this application, you’ll gain valuable experience in front-end development and create a tool that you can actually use.

Prerequisites

Before we begin, make sure you have the following:

  • Basic knowledge of HTML, CSS, and JavaScript: Familiarity with these languages is essential for understanding the code.
  • Node.js and npm (or yarn) installed: These are required for managing project dependencies and running the development server. Download and install them from nodejs.org.
  • A code editor: Choose your favorite code editor, such as Visual Studio Code, Sublime Text, or Atom.

Project Setup

Let’s start by setting up our Vue.js project. We’ll use the Vue CLI (Command Line Interface) to scaffold our application. Open your terminal or command prompt and run the following commands:

npm install -g @vue/cli
vue create bookmarking-app

During the project creation process, you’ll be prompted to select a preset. Choose the “Default (Vue 3) ([Vue 3] babel, eslint)” option. This will set up a basic Vue 3 project with Babel for transpilation and ESLint for code linting.

Navigate into your project directory:

cd bookmarking-app

Now, run the development server:

npm run serve

This will start a local development server, usually on `http://localhost:8080`. Open this address in your browser, and you should see the default Vue.js welcome page. This confirms that your project is set up correctly.

Project Structure Overview

Before we dive into the code, let’s understand the basic structure of our project. The Vue CLI creates a well-organized project structure, which makes it easier to manage and maintain your code. Here’s what the key files and directories are, and what they’ll be used for:

  • `public/`: This directory contains static assets like your `index.html` file, which is the entry point of your application.
  • `src/`: This directory is where most of your code will live.
  • `src/components/`: This directory will hold your reusable Vue components. Components are the building blocks of your UI.
  • `src/App.vue`: This is the root component of your application. It typically acts as the main container for your other components.
  • `src/main.js`: This is the entry point of your JavaScript application. It initializes the Vue app and mounts it to the DOM.
  • `package.json`: This file contains information about your project, including dependencies and scripts.

Building the Bookmark Component

The core of our application will be the `Bookmark` component. This component will be responsible for displaying a single bookmark, including its title, URL, and a delete button.

Create a new file named `Bookmark.vue` inside the `src/components/` directory. Add the following code:

<template>
  <div class="bookmark">
    <a :href="bookmark.url" target="_blank">{{ bookmark.title }}</a>
    <button @click="deleteBookmark">Delete</button>
  </div>
</template>

<script>
export default {
  props: {
    bookmark: {
      type: Object,
      required: true,
    },
  },
  methods: {
    deleteBookmark() {
      this.$emit('delete', this.bookmark.id);
    },
  },
};
</script>

<style scoped>
.bookmark {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border: 1px solid #ccc;
  margin-bottom: 10px;
}

a {
  text-decoration: none;
  color: #333;
}

button {
  background-color: #f44336;
  color: white;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
}
</style>

Let’s break down this code:

  • `<template>`: This section defines the HTML structure of the component. It displays the bookmark title as a link, the URL of the bookmark, and a delete button.
  • `:href=”bookmark.url”`: This is a Vue directive that binds the `href` attribute of the `<a>` tag to the `url` property of the `bookmark` object.
  • `{{ bookmark.title }}`: This is Vue’s interpolation syntax, which displays the `title` property of the `bookmark` object.
  • `@click=”deleteBookmark”`: This is a Vue directive that binds the `click` event of the button to the `deleteBookmark` method.
  • `<script>`: This section contains the JavaScript logic for the component.
  • `props`: This defines the properties that the component accepts from its parent. In this case, it accepts a `bookmark` object. The `required: true` ensures that the `bookmark` prop must be provided.
  • `methods`: This section defines the methods that the component can use. The `deleteBookmark` method emits a custom event named ‘delete’ with the ID of the bookmark to allow the parent component to handle the deletion logic.
  • `<style scoped>`: This section contains the CSS styles for the component. The `scoped` attribute ensures that these styles only apply to this component.

Building the Bookmark Form Component

Next, we’ll create a form component to allow users to add new bookmarks. Create a file named `BookmarkForm.vue` in the `src/components/` directory and add the following code:

<template>
  <div class="bookmark-form">
    <h3>Add New Bookmark</h3>
    <input type="text" v-model="title" placeholder="Title">
    <input type="text" v-model="url" placeholder="URL">
    <button @click="addBookmark">Add</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: '',
      url: '',
    };
  },
  methods: {
    addBookmark() {
      if (this.title.trim() === '' || this.url.trim() === '') {
        alert('Please enter both title and URL.');
        return;
      }
      const newBookmark = {
        id: Date.now(), // Generate a unique ID
        title: this.title,
        url: this.url,
      };
      this.$emit('add', newBookmark);
      this.title = '';
      this.url = '';
    },
  },
};
</script>

<style scoped>
.bookmark-form {
  padding: 20px;
  border: 1px solid #eee;
  margin-bottom: 20px;
}

input {
  display: block;
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
}

button {
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
}
</style>

Let’s break down this code:

  • `<template>`: This section defines the HTML structure of the form, containing input fields for title and URL, and an “Add” button.
  • `v-model=”title”` and `v-model=”url”`: These are Vue directives that create two-way data binding between the input fields and the `title` and `url` data properties, respectively. When the user types in the input fields, the corresponding `title` and `url` data properties are updated automatically, and vice-versa.
  • `data()`: This function returns an object containing the component’s reactive data. In this case, it initializes the `title` and `url` properties to empty strings.
  • `addBookmark()`: This method is called when the user clicks the “Add” button. It checks if both the title and URL fields have values. If they do, it creates a new bookmark object with a unique ID (using `Date.now()`), and emits a custom event named ‘add’ with the new bookmark data. Finally, it clears the input fields.
  • `$emit(‘add’, newBookmark)`: This emits a custom event named ‘add’, passing the new bookmark object as a payload. This event will be listened for by the parent component.

Integrating the Components in App.vue

Now, let’s integrate our `Bookmark` and `BookmarkForm` components into the main application component, `App.vue`. Open `src/App.vue` and replace its content with the following:

<template>
  <div id="app">
    <h1>My Bookmarks</h1>
    <BookmarkForm @add="addBookmark" />
    <div class="bookmarks-list">
      <Bookmark
        v-for="bookmark in bookmarks"
        :key="bookmark.id"
        :bookmark="bookmark"
        @delete="deleteBookmark"
      />
    </div>
  </div>
</template>

<script>
import Bookmark from './components/Bookmark.vue';
import BookmarkForm from './components/BookmarkForm.vue';

export default {
  components: {
    Bookmark,
    BookmarkForm,
  },
  data() {
    return {
      bookmarks: [],
    };
  },
  mounted() {
    this.loadBookmarks();
  },
  methods: {
    addBookmark(newBookmark) {
      this.bookmarks.push(newBookmark);
      this.saveBookmarks();
    },
    deleteBookmark(bookmarkId) {
      this.bookmarks = this.bookmarks.filter((bookmark) => bookmark.id !== bookmarkId);
      this.saveBookmarks();
    },
    saveBookmarks() {
      localStorage.setItem('bookmarks', JSON.stringify(this.bookmarks));
    },
    loadBookmarks() {
      const bookmarks = localStorage.getItem('bookmarks');
      if (bookmarks) {
        this.bookmarks = JSON.parse(bookmarks);
      }
    },
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.bookmarks-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 80%;
  margin: 0 auto;
}
</style>

Let’s break down this code:

  • `import Bookmark from ‘./components/Bookmark.vue’;` and `import BookmarkForm from ‘./components/BookmarkForm.vue’;`: These lines import the `Bookmark` and `BookmarkForm` components, making them available for use in `App.vue`.
  • `components: { Bookmark, BookmarkForm }`: This registers the imported components so that Vue knows about them.
  • `data() { … }`: This function defines the reactive data for the component. It initializes an empty array called `bookmarks` to store the bookmark objects.
  • `mounted() { … }`: This lifecycle hook is called after the component is mounted to the DOM. It calls the `loadBookmarks()` method to retrieve any saved bookmarks from local storage.
  • `<BookmarkForm @add=”addBookmark” />`: This uses the `BookmarkForm` component and listens for the custom ‘add’ event. When the event is emitted from the `BookmarkForm`, the `addBookmark` method in `App.vue` will be executed.
  • `<div class=”bookmarks-list”>`: This div contains the list of bookmarks.
  • `<Bookmark v-for=”bookmark in bookmarks” :key=”bookmark.id” :bookmark=”bookmark” @delete=”deleteBookmark” />`: This uses the `Bookmark` component to render each bookmark in the `bookmarks` array.
  • `v-for=”bookmark in bookmarks”`: This is a Vue directive that iterates through the `bookmarks` array, creating a `Bookmark` component for each item.
  • `:key=”bookmark.id”`: This is a Vue directive that provides a unique key for each `Bookmark` component. This is essential for Vue’s efficient update mechanism.
  • `:bookmark=”bookmark”`: This passes the current `bookmark` object as a prop to the `Bookmark` component.
  • `@delete=”deleteBookmark”`: This listens for the custom ‘delete’ event emitted from the `Bookmark` component. When the event is emitted, the `deleteBookmark` method in `App.vue` will be executed.
  • `addBookmark(newBookmark)`: This method is called when the `BookmarkForm` emits the ‘add’ event. It adds the `newBookmark` object to the `bookmarks` array and calls `saveBookmarks()` to persist the changes.
  • `deleteBookmark(bookmarkId)`: This method is called when the `Bookmark` component emits the ‘delete’ event. It filters the `bookmarks` array to remove the bookmark with the matching `bookmarkId` and calls `saveBookmarks()` to persist the changes.
  • `saveBookmarks()`: This method saves the `bookmarks` array to local storage using `localStorage.setItem()`. It converts the array to a JSON string using `JSON.stringify()`.
  • `loadBookmarks()`: This method loads the bookmarks from local storage using `localStorage.getItem()`. It parses the JSON string back into an array using `JSON.parse()`.

Adding Styles (Optional)

While the code above provides the core functionality, you can enhance the user experience by adding some basic styling. I’ve included basic styling in the code blocks above, but feel free to customize them further. You can add more styling rules within the `<style scoped>` blocks of your components, or you can create a global stylesheet (e.g., `src/assets/style.css`) and import it into `main.js` if you want styles to apply globally.

Handling Common Mistakes

Here are some common mistakes and how to fix them:

  • Incorrect Component Import: Make sure you are importing your components correctly in `App.vue`. Double-check the file paths.
  • Missing `key` attribute in `v-for`: Always provide a unique `:key` attribute when using `v-for`. This helps Vue efficiently update the DOM. Use a unique identifier, such as the bookmark ID.
  • Data Binding Issues: If the input fields in `BookmarkForm` aren’t updating the data, double-check your `v-model` directives. Ensure that the corresponding data properties are defined in the component’s `data()` function.
  • Event Handling Problems: Verify that you’ve correctly emitted and listened for custom events. Make sure the event names match and that you’re passing the correct data.
  • Local Storage Errors: If bookmarks aren’t being saved or loaded correctly, check the browser’s developer console for any errors related to `localStorage`. Make sure you’re correctly using `JSON.stringify()` and `JSON.parse()`. Also, check for any browser security settings that might be preventing local storage access.

Testing Your App

After implementing the code, test your application thoroughly. Add bookmarks, delete bookmarks, and refresh the page to ensure that your data is saved and loaded correctly. Use your browser’s developer tools to inspect the elements, check the console for any errors, and observe the network requests if you are using any external resources.

Key Takeaways

  • Components: Vue.js applications are built using reusable components.
  • Data Binding: Vue.js provides two-way data binding using the `v-model` directive to connect UI elements with data.
  • Event Handling: Use directives like `@click` to handle user interactions and custom events to communicate between components.
  • Props: Pass data from parent to child components using props.
  • Local Storage: Use `localStorage` to persist data in the user’s browser, allowing your app to store and retrieve data even after the browser is closed.

Extending the App (Further Learning)

This simple bookmarking app is a great starting point. Here are some ideas for extending it:

  • Add categories: Allow users to categorize their bookmarks.
  • Implement search: Add a search feature to easily find bookmarks.
  • Improve styling: Use CSS frameworks like Bootstrap or Tailwind CSS to enhance the app’s appearance.
  • Add drag-and-drop functionality: Allow users to reorder their bookmarks.
  • Implement user authentication: Allow users to create accounts and save their bookmarks.
  • Use a backend: Instead of local storage, connect your app to a backend database to store bookmarks remotely.

FAQ

Q: How do I run this application?

A: After setting up the project using the Vue CLI and navigating into the project directory, run `npm run serve` in your terminal. Then, open your browser and go to `http://localhost:8080` (or the address displayed in your terminal).

Q: Where is the bookmark data stored?

A: The bookmark data is stored in your browser’s local storage. This means the data is specific to your browser and will be available even if you close the browser and reopen it later, unless you clear your browser’s local storage.

Q: How can I debug my application?

A: Use your browser’s developer tools (usually accessed by right-clicking on the page and selecting “Inspect”). The “Console” tab displays JavaScript errors and `console.log()` output. The “Elements” tab allows you to inspect the HTML structure. The “Network” tab shows network requests.

Q: How can I deploy this application?

A: You can deploy your Vue.js application to various platforms, such as Netlify, Vercel, or GitHub Pages. First, you need to build your application using `npm run build`. This generates a production-ready build in the `dist/` directory. Then, follow the instructions provided by your chosen deployment platform to deploy the contents of the `dist/` folder.

Q: Can I use this app on my phone?

A: Yes, since it’s a web application, you can access it on your phone’s web browser, provided you have the URL and the server is running or the application is deployed online. The app is responsive by default, but you might want to adjust the styling for optimal mobile viewing.

Building a bookmarking app with Vue.js provides an excellent foundation for understanding the core principles of front-end development. By breaking down the problem into smaller, manageable components and utilizing Vue.js’s reactive data binding and event handling, you’ve created a functional and practical tool. With the knowledge and experience gained from this project, you’re well-equipped to tackle more complex web development challenges. The ability to save and organize information is a valuable skill in today’s fast-paced world, and now you have a personal, customized solution. Continue exploring Vue.js and experimenting with different features to enhance your skills and create even more impressive web applications. The possibilities are vast, and the journey of learning is ongoing, so keep coding, keep creating, and enjoy the process of bringing your ideas to life.

More posts