Package org.mycore.webtools.vue

Class MCRVueRootServlet

java.lang.Object
jakarta.servlet.GenericServlet
jakarta.servlet.http.HttpServlet
org.mycore.frontend.servlets.MCRServlet
org.mycore.frontend.servlets.MCRContentServlet
org.mycore.webtools.vue.MCRVueRootServlet
All Implemented Interfaces:
jakarta.servlet.Servlet, jakarta.servlet.ServletConfig, Serializable
public class MCRVueRootServlet extends MCRContentServlet

This Servlet can be bound to a URL where a Vue Build App with a createWebHistory() router is present.

<servlet>
  <servlet-name>MCRVueRootServlet</servlet-name>
  <servlet-class>org.mycore.webtools.vue.MCRVueRootServlet</servlet-class>
</servlet>
<servlet-mapping>
  <servlet-name>MCRVueRootServlet</servlet-name>
  <url-pattern>/handbuecher/*</url-pattern>
</servlet-mapping>

It will pass through resources that exists at this path like javascript and css, but at every other path it will deliver a modified version of the index.html. The index.html is convert to xhtml and then will be wrapped with a MyCoReWebPage, which will produce the surrounding default layout.

In the example the vue app is located in: src/main/vue/modul_handbuecher

The Router needs to be configured like this:

function getContext() {
  const el = document.createElement('a');
  el.href = (<any>window).webApplicationBaseURL;
  return el.pathname;
}
const router = createRouter({
  history: createWebHistory(getContext() + "handbuecher/"),
  routes
})

The String "handbuecher/" is the location of the vue app below the java application context.

To change the output destination of the vue compiler process you need to change the vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  outputDir: "../../../../target/classes/META-INF/resources/handbuecher",
  publicPath: "./"
});
See Also:

  • Constructor Details

    • MCRVueRootServlet

      public MCRVueRootServlet()

  • Method Details