Exploring the process of integrating and registering local components within the App.vue file

Currently, I am working with Laravel 10, Vite, and Vue

I would like to incorporate two components into my App.vue file

Below is the content of my App.vue file :

    <template>
        <div>
            <AppHeader></AppHeader>
            ... Content ...
            <AppFooter></AppFooter>
        </div>
    </template>

    <script setup>
    import AppHeader from "./components/partials/AppHeader.vue";
    import AppFooter from "./components/partials/AppFooter.vue";
    export default {
        components : {
            AppHeader,
            AppFooter,
        }
    }
    </script>

An error message popped up indicating:

[vite:vue] [@vue/compiler-sfc] <script setup> cannot contain ES module exports. If you are using a previous version of <script setup>, please consult the updated RFC at https://github.com/vuej
s/rfcs/pull/227.

C:/xampp/htdocs/laravel/rest_api/resources/js/components/App.vue
9  |  <script setup>
10 |  import AppHeader from "./components/partials/AppHeader.vue";
11 |  import AppFooter from "./components/partials/AppFooter.vue";
   |                                                               ^
12 |  export default {
   |  ^^^^^^^^^^^^^^^^
13 |      components : {
   |  ^^^^^^^^^^^^^^^^^^
14 |          AppHeader,
   |  ^^^^^^^^^^^^^^^^^^
15 |          AppFooter,
   |  ^^^^^^^^^^^^^^^^^^
16 |      }
   |  ^^^^^
17 |  }
   |  ^

Your assistance on this matter would be greatly appreciated.

I'm fairly new to Vue and currently following a tutorial for guidance

Answer №1

Appreciate your assistance, it was helpful to me but I made a slight modification

import AppHeader from "./components/partials/AppHeader.vue";
import AppHeader from "./components/partials/AppHeader.vue";

to

import AppHeader from "@/components/partials/AppHeader.vue";
import AppFooter from "@/components/partials/AppFooter.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

Generating elevation graph from a kml file with the combination of php and javascript

Currently, I am exploring the Google Elevation Service with the goal of creating an elevation profile similar to the one showcased in this example: Below is the JavaScript code snippet used: var elevator; var map; var chart; var infowindow = new google.m ...

301 redirection will be implemented on the upcoming static export

Working on a Next.js project, I utilized static export for better performance and SEO. Yet, I've come across an issue with URL changes. I'm looking to incorporate a 301 redirect to ensure search engines and users are directed to the correct pages ...

Tips on placing an li element into a designated DIV

Just starting out with jquery and working on a slider project. Here's what I have so far: <ul> <li> <img src="image.jpg"><p>description of the current image</p></li> <li> <img src="image.jpg"> ...

Making AngularJS work with angular-ui bootstrap and ensuring compatibility with IE8

Having trouble getting AngularJS code that utilizes angular-ui bootstrap to function properly in IE 8? Following the guidelines in the AngularJS developer guide on IE didn't seem to solve the issue for me. I inserted the code snippet below into my ind ...

The error message in React Hook Form states that the handleSubmit function is not recognized

I'm facing an issue with using react-hook-form for capturing user input. React keeps throwing an error that says "handleSubmit is not a function". Any suggestions on how to resolve this would be highly appreciated. Here's the code snippet I&apos ...

Create a new design of a Three.js element

After reviewing this particular example involving three.js for drawing particles with images, I found it to work flawlessly. However, I am interested in replacing the image by toggling it with a switch upon clicking a button. Here is the function for this ...

Is there a way to circumvent the eg header along with its contents and HTML code using JavaScript?

I have a script in JavaScript that is designed to replace the content of data-src attribute within each img tag with src. However, I am facing an issue where this script interferes with the functionality of a slider located in the header section. The sli ...

What is the best way to manage data that arrives late from a service?

Within my Angular application, I have a requirement to store data in an array that is initially empty. For example: someFunction() { let array = []; console.log("step 1"); this.service.getRest(url).subscribe(result => { result.data.forEach( ...

Two distinct actions achieved through a single form using JavaScript

Looking to populate fields using one JavaScript button and then submit the collected data with a second JavaScript button. I am able to get the fields to populate when clicking the "Populate" button, but none of the values show up on the ordertest.php page ...

What is the best way to add content to fill the empty space left after a column has been hidden in a column

Is there a way to automatically adjust the space when a column is hidden by clicking on the legend item? <div id="container" style="height: 300px"></div> <script src="http://code.highcharts.com/highcharts.src.js"></script> var ...

Unable to retrieve data from a nested object within a JSON structure

In my React project, I have created a function component like the one below: function FetchData() { const [randomUserData, setRandomUserData] = useState(''); const url = 'https://randomuser.me/api/'; const fetchData = () => { ...

Tips for resolving the error message "SyntaxError: Unexpected identifier" when conducting tests on vuetify components with jest

I've developed numerous reusable components using Vuetify. For unit testing, I'm utilizing the Jest testing framework. However, when running 'npm run test', the test fails with a 'SyntaxError: Unexpected identifier' message. ...

Can a variable be initialized with a concealed or additional argument?

After just 2 weeks of coding, I'm struggling to find information on how to initialize a variable with an extra argument in a recursive function call. Is this even possible? And if it is, are there any scenarios where it's considered best practice ...

How do I fix TypeError: req.flash is not a valid function?

While working with user registration on a website, validation is implemented using mongoose models and an attempt is made to use Flash to display error messages in the form. However, in my Node.js app, an error is occurring: TypeError: req.flash is not ...

Sneaky spam and ads embedded within Joomla template

Today, while examining the source code of a Joomla site I am developing, I stumbled upon some hidden links that seem to be spam. I have spent an hour searching through various template files but have been unable to locate them. The hidden links in questio ...

Having trouble with the anchor tag not functioning properly on Safari for iPhone?

First, let's include the anchor tag code: <a id="store_follow" class="primary-button" data-user-action='on' data-id='<?php echo $value->storeId;?>' data-mode='<?php echo UserUtils::ACTION_MO ...

Is it possible to create 3D maps using a combination of Three.js and leaflet

Creating 3D maps with Leaflet can be quite the challenge, but I'm determined to make it happen. My goal is to display buildings in a three-dimensional perspective using Leaflet as my foundation. I've dabbled with OSM Buildings, but they fell sho ...

Step-by-step Guide to Setting pageProps Property in Next.js Pages

When looking at the code snippet provided in .../pages/_app.js, the Component refers to the component that is being exported from the current page. For instance, if you were to visit , the exported component in .../pages/about.js would be assigned as the ...

Beware: The use of anonymous arrow functions in Next.js can disrupt Fast Refresh and lead to the loss of local component state

I am currently encountering a warning that is indicating an anonymous object in a configuration file, and even specifying a name for it does not resolve the warning. Below you will find the detailed warning message along with examples. Warning: Anonymous ...

Tips on extracting images from a blob:http localhost URL using jquery, angularjs, or webgl

Can anyone guide me on how to retrieve an image from a localhost URL by using jQuery, AngularJS, or WebGL? I have the URL of the uploaded image file in the format: blob:http%3A//localhost%3A9000/87424398-8ee0-4db1-a653-bc18838d6b24. My goal is to display t ...