Utilizing Vue Components as the initial entry point rather than main.js

Currently, I am utilizing a Java backend along with Jersey and I am interested in implementing multiple small page applications. My plan involves creating a frontend module with a directory named /apps. Within the /apps folder, there will be various Vue components that serve as the main apps. Additionally, there is another folder named /components that houses different components utilized across these apps. The goal is to configure webpack to generate individual JavaScript files for each Vue app!

I am aware that webpack typically does not support multiple entry points or outputs. Does anyone have suggestions on how I can set up multiple entry points using different apps-file.vue and output multiple .js files?

vue.jsvue-component

Answer №1

I recently encountered a similar issue and found this helpful answer that guided me in the right direction. Following the Vue CLI documentation, I was able to incorporate a pages configuration option within a vue.config.js file.

Through some trial and error, I arrived at a satisfactory solution. I documented the process in a repository that outlines the step-by-step instructions for creating a multi-page Vue application from scratch.

Check out the GitHub repo here

Key features I was seeking included:

  1. Making use of the Vue CLI, which eliminates the need to deal with most webpack configuration complexities.
  2. Avoiding the necessity of generating an entry point .js file for each app/page.

With this method, you simply place various .vue files within the src/pages directory and it automatically generates a separate Vue application for each one. (You can easily modify the folder name from pages to apps if desired.)

Automated Generation of Pages Configuration and Entry Points

The core of the solution involves a script that creates an src/entry/bar/index.js entry point file for every src/pages/bar.vue discovered, alongside generating a src/entry/pages.config.js file that can be imported into your vue.config.js as shown below:

const pagesConfig = require("./src/entry/pages.config.js");

module.exports = {
  pages: pagesConfig,
};

Below is the script utilized:

... (script content provided) ...

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the most effective method for ensuring a Vue application can accurately interpret the environmental variables configured on Heroku?

I implemented a Vue app that is currently being hosted on Heroku. Since Heroku doesn't support static apps, I decided to create a basic express server to serve my app. //server.js const express = require('express') const serveStatic = requi ...

node.jsexpressvue.jsheroku

The JavaScript function I created to remove the last item in an array is not functioning correctly when it encounters an "else

My button has been designed to delete the last index from this.fullformula, which is a string. However, I've encountered an issue with deleting characters from this.result, which is an integer. Instead of looping over the function, it only deletes one ...

javascriptvue.js

Troubleshooting: Passing data from child to parent component in Vue causing event malfunction

This is a custom component created by Jobs that triggers an event to its parent component. <div class="card py-1 my-1" @click="$emit('active-job', job.id, job.slug)"></div> The parent component is set up to listen ...

vue.jsvue-componentcustom-events

Best practices for managing login authentication using MongoDB in a RESTful API

I'm currently figuring out how to verify if the values align with the MongoDB data. In my approach, I'm utilizing the PUT method along with attempting to utilize findOneAndUpdate to validate the values. <script> const logindetails = new Vu ...

node.jsmongodbrestexpressvue.js

Using Vue to alter data through mutations

Greetings! I am currently in the process of developing a website for storing recipes, but as this is my first project, I am facing a challenge with modifying user input data. My goal is to create a system where each new recipe added by a user generates a u ...

javascripthtmlcssvue.jsvuex

Tips for avoiding the automatic transition to the next slide in SwiperJS

How can I prevent the next button click in swiper based on my custom logic? I am using the swiperjs library within a Vue project and I need to stop users from swiping or clicking the next button to move to the next slide depending on certain conditions de ...

javascriptvue.jsswiper.js

Utilize Vue-cli 3.x to load static resources

In my vue-cli 3 project, I have organized the static assets in the public directory. When compiled and built on localhost, all assets load successfully, except for some images not appearing in the browser. Despite guyana-live-logo.png, slide-1.jpg, and 97 ...

javascriptvue.jsvue-cli-3

Vuex - Managing dependencies within nested modules

I am facing a challenge in expressing a dependency between properties within my app's state using Vuex. Upon logging in, the user must select one of several workspaces to connect to. It is essential for the workspace to depend on the login status; ho ...

typescriptvue.jsmoduledependenciesvuex

Having an issue with Vue Dev Tools where the "Open in Editor" button is not functioning properly. Any suggestions on how to resolve this?

I followed a tutorial to implement a new feature, using the instructions found here: https://github.com/vuejs/vue-devtools/blob/master/docs/open-in-editor.md However, I encountered an error: "C:\Users\User\AppData\Local\Programs& ...

vue.jsvue-cli-3vue-devtools

A guide on how to assign a placeholder as the default value for a date picker

Currently using Vue3 with options API, and this question does not pertain to date formatting. Looking at the code provided on StackBlitz here, the default format for the date being initially set is dd.mm.yyyy. I am interested in knowing how to set the date ...

javascriptvue.jsvuejs3

Detecting server errors in Nuxt.js to prevent page rendering crashes: A Vue guide

Unique Context This inquiry pertains to a previous question of mine, which can be found at this link: How to handle apollo client errors crashing page render in Nuxt?. However, I'm isolating the focus of this question solely on Nuxt (excluding apollo ...

javascriptvue.jsnuxt.jsapollo

Incorporating a helper JavaScript file to seamlessly integrate Typeform into a project built with Vue

Struggling with incorporating a typeform into my website through the use of both vue and laravel. The problem arises when trying to embed the typeform using a script, as Vue throws an error when attempting to include the script directly within the compone ...

javascriptlaravelvue.jsvuejs2vue-component

Unexpected token error occurs when using map-spread operator in vue-test-utils combined with jest

I recently set up testing for my Vue project by following the instructions provided in this helpful guide here Upon completion of the guide, I proceeded to create a test for one of my components. However, when I ran jest, I encountered the following error ...

javascriptvue.jsbabeljsjestjsvue-test-utils

Incorporating personalized scrollbars into Vuetify's data tables

I need to include perfect-scrollbar with Vuetify's data tables. To do this, I must enclose the data table inside the perfect-scrollbar component as shown below: <perfect-scrollbar> <v-data-table :headers="headers" :items="data" /> </ ...

vue.jsdatatablescrollbarvuetify.js

The icons from Vuetify display in a stylish italic font

Recently, I started on a fresh vue2 project with vuetify and added several components including a navbar. However, I encountered an issue where my icon appeared as italic texts. https://i.stack.imgur.com/WIrH0.png Despite checking the console and network ...

vue.jsvuejs2vue-componentvuetify.js

Guide on structuring Vue so that all pages have a consistent header and navigation, while still allowing for standalone pages like a registration form

Currently, my Vue app is structured like this: https://i.stack.imgur.com/bMqxX.png In this layout, the login Vue is live under VContent. Certain parts of the header and nav are disabled based on the authentication state. For instance, the logout button i ...

vue.js

Loop through each instance of a data record in a JSON document using Vue's v-for directive

I am currently working on a project that involves extracting data from a website that monitors traffic jams and maintenance work. My goal is to specifically retrieve information about traffic jams and display them individually. The code I am using utilize ...

javascriptvue.js

Guide on creating a Docker image from a Vue.js application and deploying it to a Nexus repository using GitLab's CI/CD pipeline

I am currently working on a Vuejs application that needs to be built in order to push into Nexus as a Docker image. All the Vuejs contents are stored on a GitLab repository. The pipeline consists of these stages: setup (retrieve information from pipeline ...

dockervue.jsgitlabgitlab-cigitlab-ci-runner

Setting up an Express route to return a res.json(data) object and showcasing the response in a Vue $HTTP call

https://i.stack.imgur.com/GWhW4.png There is actual data in the collection represented by https://i.stack.imgur.com/afMV1.png In this scenario, express is used with a Mongoose model that interacts with mongodb collections named "comments" var mongoose = ...

node.jsmongodbexpressvue.jsvue-resource

Exploring methods to test the use of custom CSS variables in VueJS

I am currently working on a VUEJS test and I need to access the style information. The component is being utilized in this manner: :style="background-color: var(--color)" The following methods are being used: wrapper.find('.avatar'). ...

vue.jsunit-testingjestjs