Issue: Unable to locate module - Error in integration of Vue.js with Laravel framework

I'm currently following a tutorial on YouTube for setting up Vue and Laravel.

My resources folder structure looks like this so far:

- resources
   - js
       - app.js
       - vue
            -app.vue

In my app.js file:

require('./bootstrap');

import Vue from 'vue'

import App from './vue/app'

const app = new Vue({
    el : "#app",
    components : { App }
});

As for the app.vue file:

<template>
    <div>
        Hello World
    </div>
</template>

<script>
    export default {
        
    }
</script>

When I try running npm run hot,

I encounter an error message:

Module not found: Error: Can't resolve './vue/app' in 'C:\xampp\htdocs\test-app\resources\js'

If anyone could provide assistance, it would be greatly appreciated.

Answer №1

Change the name of your app.vue file to App.vue

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

Determine whether the browser tab is currently active or if the user has switched to a different

Is there a way to detect when a user switches to another browser tab? This is what I currently have implemented: $(window).on("blur focus", function (e) { var prevType = $(this).data("prevType"); if (prevType != e.type) { // handle double fir ...

What causes the reflection of JavaScript variables when there is a change in ng-model?

By declaring the object globally and assigning it during an HTTP call when the Angular controller loads, I am able to update the values of this object in the Angular scope variables and access them through ng-models. When a button is clicked and one of the ...

I am interested in implementing a feature that automatically saves form data when changes are made. My solution involves creating a dynamic form utilizing

When creating a dynamic form in HTML using Laravel and then calling it through JQuery, I encountered an issue where the first form created showed an undefined form ID, but subsequent forms displayed their form IDs. How can this issue be resolved? Below i ...

Assign a class to the element only when the second div also has a class

I am trying to create a functionality where I have a dropdown element (Li element) that receives an Active class when its parent div (button) is clicked. When the dropdown element has this class, I want to assign the same class to another div. If the dropd ...

Troubleshooting PHP and jQuery AJAX: Why is $_POST always empty?

I'm struggling to display the $_POST value in an alert box using jQuery AJAX function. However, the $_POST value from my PHP controller always turns out to be empty, resulting in an empty array in the response. My setup includes PHP version 5.5 and j ...

Arranging DIVs in a vertical layout

Currently, I am working on a design that involves organizing several <DIV> elements in a vertical manner while still maintaining responsiveness. Here are some examples: Wider layout Taller layout I have tried using floats, inline-block display, ...

Issue: 040A1079 - Failure in RSA Padding Check with PKCS1 OAEP MGF1 Decoding Error Detected on Amazon Web Services

Utilizing the crypto package, I execute the following tasks: Using crypto.generateKeyPairSync() to create publicKey and privateKey The keys are generated only once and stored in the .env file Applying crypto.publicEncrypt() to encrypt data before savin ...

What is up with this strange JavaScript variable string / DOM selection?

I'm facing a strange issue with a variable that appears to be a string when alerted, but in the console, it is actually a DOMSelection presented in tree form. How can I retrieve the actual string value from this console output? DOMSelection anchorNod ...

Guide on automatically inserting a colon (:) after every pair of characters in Angular

I am looking to automatically insert a colon (:) after every 2 characters in my input field: HTML <input nz-input type="text" appLimitInput="textAndNumbers" name="mac" formControlName="mac" (keydown.space)=&qu ...

AngularJS using the ng-controller directive

I am presenting the following HTML code excerpt... <!DOCTYPE html> <html lang="en-US" ng-app> <head> <title>priklad00007</title> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angula ...

Is there a way to determine the bounding rectangle of a specific word within a paragraph when you only have its index?

I am currently developing a text-to-speech functionality for a react application that can emphasize the word being spoken by highlighting it with a background color. This feature closely resembles the layout of the Firefox reader view. However, my curren ...

Getting the version from package.json in Next.js can be easily achieved by accessing the `version

In my quest to retrieve the "version" from the package.json in a Next.js application, I encountered a roadblock. I attempted using process.env.npm_package_version, similar to how it is done in a Node application, but unfortunately, it returned undefined. ...

After the page is reloaded, apply a class to the divs by selecting them based on the "data" attribute

I have a set of four cards labeled "card", each representing different body parts: eyes, torso, arms, and legs. <div class="card" data-lesson="eyes">eyes</div> <div class="card" data-lesson="torso">torso</div> <div class="card" ...

What causes the modal to appear and then vanish suddenly?

I've created a simple modal code with minimal JS involved. When the button is clicked, the modal appears briefly, then the page refreshes and the modal disappears. I'm not sure what could be causing this issue. Any help would be appreciated! h ...

Remove any javascript code from the ajax modal when it is closed or hidden

I am in the process of creating a music website that showcases songs along with their lyrics. One of the features I have added is a lyrics button that, when clicked while a song is playing, opens up a modal displaying the live lyrics. Everything works per ...

Angular directive for automatically selecting a <select> value when there is only one option available in ngOptions

How can I create a directive that automatically preselects an option if only one item is available in the ngOptions scope? Currently, my code looks like this: <select id="provider" name="provider" class="form-control" ng-model="foo.provider" ...

"Flashes of canvas in constant motion between animated scenes

I have a practical exercise to do for school, but I am very new to HTML/JS. The issue I am facing is that my canvas is flashing, like it erases one image and then quickly displays another. I want both images to be displayed at the same time. Here is the co ...

Encountering a problem with utilizing the equalTo() method in Firebase Realtime Database in a React

I'm having trouble randomizing and querying a specific node in my database based on the ShopNo When I use equalTo, I can't seem to retrieve the desired node. Instead, I'm only getting a randomized value based on the total number of Shop ent ...

The video in the TypeScript code within the Owl Carousel is not displaying properly - only the sound is playing. The video screen remains stationary

I recently updated my query. I am facing an issue while trying to play a video in Owl Carousal with a button click. The video plays sporadically, and most of the time it doesn't work properly. When playing without the carousel, a single video works fi ...

The JSON creation response is not meeting the expected criteria

Hello, I'm currently working on generating JSON data and need assistance with the following code snippet: generateArray(array) { var map = {}; for(var i = 0; i < array.length; i++){ var obj = array[i]; var items = obj.items; ...