Multiple Pages In Vue Js Cli

When it comes to building web applications with Vue.js, the Vue CLI is a powerful tool that streamlines the development process. One common requirement in many applications is the need for multiple pages. In this article, we will explore how to set up multiple pages in a Vue.js project using the Vue CLI.

To get started, open your Vue CLI project and navigate to the 'src' directory. By default, Vue CLI creates a single entry point for your application in the 'main.js' file. If you want to have multiple pages, you will need to set up separate entry points for each page.

First, create a new file in the 'src' directory for your additional page. For example, let's say you want to create a page named 'AboutPage.vue'. You can create a new file named 'about.js' and import the necessary components.

Javascript

import Vue from 'vue';
import AboutPage from './AboutPage.vue';

new Vue({
  render: (h) =&gt; h(AboutPage),
}).$mount('#about-page');

In this file, we import the Vue library and the AboutPage component. We then create a new Vue instance and specify the component to render. Finally, we mount the Vue instance to a specific element in the HTML, such as a div with the id 'about-page'.

Next, you need to update your webpack configuration to handle multiple entry points. Open the 'vue.config.js' file in the root of your project directory and add the following configuration:

Javascript

module.exports = {
  pages: {
    index: {
      entry: 'src/main.js',
      template: 'public/index.html',
      filename: 'index.html',
      title: 'Home Page',
    },
    about: {
      entry: 'src/about.js',
      template: 'public/index.html',
      filename: 'about.html',
      title: 'About Page',
    },
  },
};

In this configuration, we define two pages: 'index' and 'about'. For each page, we specify the entry point, template file, output filename, and the title of the page.

Once you have set up the additional page and updated the webpack configuration, you can now run the development server with the following command:

Bash

npm run serve

This will compile your Vue.js project with multiple pages and start a development server. You can access the 'index' page at 'http://localhost:8080' and the 'about' page at 'http://localhost:8080/about.html'.

With these steps, you can easily set up multiple pages in a Vue.js project using the Vue CLI. This approach allows you to organize your application into distinct pages with separate entry points, making it easier to manage and scale your project. Happy coding!

Related posts:

Contact Info