Create a war for my webapp (Spring + Vue and NuxtJS)

I am trying to build my web application into a war that must contain both my frontend (written in Vue + NuxtJS) and my backend (Spring). The architecture of my app is the following:

|
- src
 |
 -main
  |
  - frontend
    | 
    - dist
    | 
    - components
    |
    - pages
    |
   ...
  |
 ...
  |
  - webapp
    |
    - WEB-INF
      | my backend files

I am trying to use this frontend-maven-plugin. This is my build configuration in the pom.xml:

<build>
        <plugins>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-war-plugin</artifactId>
                <version>3.2.2</version>
                <configuration>
                    <warName>MyApp</warName>
                    <filteringDeploymentDescriptors>true</filteringDeploymentDescriptors>
                </configuration>
            </plugin>
            <plugin>
                <groupId>com.github.eirslett</groupId>
                <artifactId>frontend-maven-plugin</artifactId>
                <version>1.12.0</version>

                <executions>
                    <execution>
                        <id>Install node and yarn</id>
                        <goals>
                            <goal>install-node-and-yarn</goal>
                        </goals>
                        <phase>generate-resources</phase>
                        <configuration>
                            <nodeVersion>v15.13.0</nodeVersion>
                            <yarnVersion>v1.22.10</yarnVersion>
                        </configuration>
                    </execution>

                    <execution>
                        <id>yarn install</id>
                        <goals>
                            <goal>yarn</goal>
                        </goals>
                        <phase>generate-resources</phase>
                        <configuration>
                            <arguments>install</arguments>
                        </configuration>
                    </execution>
                </executions>
            </plugin>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-resources-plugin</artifactId>
                <version>3.2.0</version>
                <executions>
                    <execution>
                        <id>Copy Vue frontend into Spring Boot target static folder</id>
                        <phase>process-resources</phase>
                        <goals>
                            <goal>copy-resources</goal>
                        </goals>
                        <configuration>
                            <outputDirectory>target/classes/static</outputDirectory>
                            <resources>
                                <resource>
                                    <directory>src/main/frontend/dist</directory>
                                    <filtering>true</filtering>
                                </resource>
                            </resources>
                        </configuration>
                    </execution>
                </executions>
            </plugin>
        </plugins>
    </build>

After running mvn clean package, I checked my target folder and I noticed that my frontend files are copied from src/main/frontend/dist into target/MyApp/WEB-INF/classes/static. However, when I deploy my war in Tomcat, I am not able to visualize my frontend pages.

If I understood correctly, I should see my main index.html file at localhost:8080/MyApp. This doesn't happen, and I can't see any of the other pages as well.

The backend works as expected (at localhost:8080/MyApp/api/myApi).

I am clearly doing something wrong. Can anyone help me spot the problem? Thank you.