Importing an array of Vue components to be exported and utilized in the app.js file

I'm currently working on a Laravel 8 project with vue.js v2.6 and I want to clean up my app.js file by moving all of my Vue.component() declarations to a separate file. To achieve this, I created js/vueComponents.js where I placed all the vue component declarations. However, when trying to import and use require() in app.js, I encountered some errors:

app.js:4301 Uncaught TypeError: $ is not a function
    at Module../node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components...

As I am new to importing JavaScript files as modules, I'm wondering if I'm doing this correctly?

vueComponents.js

import * as Vue from 'vue'

export let vueFiles = [
        Vue.component('users-page', require('./components/users-page.vue').default),
        Vue.component('admin-page', require('./components/admin-page.vue').default),
        ...20 more components...
    ];

app.js

import { vueFiles } from './vueComponents.js';
Vue.use(vueFiles);
javascriptvue.js

Answer №1

Vue components

// Vue components.js file example
// Importing Vue is not necessary.
// Simply register the components like this (without using an array for registration)
Vue.component('users-page', require('./components/users-page.vue'));
Vue.component('admin-page', require('./components/admin-page.vue'));

Main app script

require("./vueComponents.js") // Make sure to provide the correct file path.

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

Hover over a particular element using a loop in Vue.js

Is there a way to change the price button to an Add to Cart button on mouseover, considering the true false data trigger for each item? How can we specify which item to target when hovering over the price section? Below is the code snippet: template: < ...

javascriptvue.js

Having trouble with Vue-if conditional not functioning as expected? It seems like the if-else block is being

Following up on a previous question I asked here: (I have 2 records in a database Vue outputs 8 records). In that inquiry, I encountered difficulties retrieving a JSON list of games for an online casino project I am working on. Initially, Vue had trouble l ...

jsonlaravelvue.js

Vue - understanding the process of validating information from Vuex store

My project involves a complex form with approximately 17-20 fields, potentially influenced by the status of a checkbox. The intention is to submit this form to an API backend. The proposed strategy includes validating the user input using Vuelidate and pr ...

vue.jsvuelidate

Guide to implementing a personalized filter in AngularJS 1.6

I am struggling with injecting a custom filter, status, into my component. Below is the code for my component: function ClaimsListController(dpClaimsListService) { var ctrl = this; ctrl.claims = null; ctrl.searchCriterion = null; ctrl.l ...

javascriptangularjs

Is it possible to update the variable value in one controller from another controller after an http.get request has been made

I have encountered an issue with updating a variable from one controller to another using a service. Despite my efforts, the variable is not being updated. The goal is to have the variable $scope.names in controller 'select' update in controller ...

javascriptangularjs

Tips for using jQuery to adjust HTML attributes based on conditions

I'm still trying to figure out how to assign a different class attribute to an element based on another element's dynamic numberical attribute. Here is the HTML & PHP code I am working with: <?php for($i=1;$i<=$total;$i++){ ?> <a hr ...

javascriptphpjqueryhtmlcss

Creating a customizable React application with an extra environmental setting

I'm currently working on an app that requires some variations. While the core remains the same, I need to customize certain parts of the app such as color schemes and images. My inquiry is: Is it feasible to construct an app with a specified instance ...

javascriptnode.jsreactjsnpm

Develop a time-sensitive store system using HTML and JavaScript that toggles between open and closed status based on set

I am looking to develop a time-based Open/Closed store using HTML and JavaScript. The concept is that on Fridays, the element with id="friday" should be displayed, otherwise, show the element with id="week". Additionally, if the time i ...

javascripthtml

Retrieve the boolean value associated with a checkbox

I inherited a project from another developer. The code is able to retrieve data from the text input fields in the form, but not from the checkbox inputs. The previous developer implemented these functions (among others): protected function getObjectStrin ...

javascriptphpforms

How can one determine if a new document was created by Mongoose's upsert feature?

My code in node.js/express.js looks like this: var User = mongoose.model('User'); var usersRouter = express.Router(); usersRouter.put('/:id', function(req, res) { req.body._id = req.params.id; var usr = new User(req.body); ...

javascriptnode.jsmongodbexpressmongoose

Preventing request interceptors from altering the request header value in Node.js

I am currently using the http-proxy-middleware to set up a proxy, and it is working smoothly. However, before I apply app.use('/', proxy_options);, I am attempting to intercept my request and update the request header. Unfortunately, the changes ...

javascriptnode.jsexpressnodemon

Choosing a default selection in a nested v-for loop for a select box

Currently, I have a list of items that users can add new items to. Each item is required to have a select box, and the selected value from the select box should be assigned as the item's value. In an attempt to bind the select box to the item using t ...

javascriptselectvue.jsvuejs2

Jose authentication is encountering issues with verifying JWT

My Next.js/Clerk.js middleware setup looks like this: import { authMiddleware } from "@clerk/nextjs"; import { jwtVerify } from "jose"; export default authMiddleware({ publicRoutes: ["/", "/contact", "/pricin ...

javascriptnext.jsjwt

What is the process for generating a fresh PSBT transaction using bitcoinjs-lib?

This is the code I've been working on import * as bitcoin from 'bitcoinjs-lib' const NETWORK = bitcoin.networks.regtest; const psbt = new bitcoin.Psbt({ network: NETWORK }); function p2shAddress(node: bitcoin.ECPairInterface): string { c ...

javascripttypescriptbitcoin

Using assert.rejects() in Mocha and Node: A Complete Guide

Following the instructions in the documentation, I attempted to use assert.rejects to test for an error message (I have Node version above v10). However, no matter what message I specify, the test always passes. What could be causing this issue? it("is f ...

javascriptpromisemocha.jsnode-assert

A guide on clearing the selected value in a dropdown menu with Angular.js

Can someone assist me with setting the drop-down value to blank after completing an action in Angular.js? Below is my code explanation: <div style="height:270px; overflow-x:hidden; overflow-y:scroll;" ng-show="viewOrderTable"> <div class="table-r ...

javascriptangularjs

Issue with nested directive not triggering upon page load

I recently started working with AngularJS and came across an issue with nested directives. In my project, I have two directives: MainDir.js (function(){angular.module("mod").directive("mainDir", function(){ return { restrict: "E", scope: {}, ...

javascriptangularjs

Is there a way to find a substring that ends precisely at the end of a string?

Looking to rename a file, the name is: Planet.Earth.01.From.Pole.to.Pole.2006.1080p.HDDVD.x264.anoXmous_.mp4 I want to remove everything starting from 2006 onwards. I considered using JavaScript string methods to find the index of the unnecessary part an ...

javascriptnode.jsregexstring

Steps for generating instances of an HTML page and dynamically adding them to a list on the main page

I have a main HTML page and I need to insert a dynamically generated list from a template in another HTML file that I created. The template for each item in the list is located on a separate HTML page. My goal is to create multiple instances of this HTML ...

javascriptjqueryhtmlcssweb

Is it possible to iterate over nested arrays in Vue?

Seeking advice on how to effectively loop through a JSON object like the one provided below using v-for. My goal is to iterate over all ID's/Numbers and the items within each number, then display them in a list format... I'm aware that I can easi ...

vue.jsvuejs2