Vue 3 with Echo embed.FS

[ghost]

To get Vue 3 app (Vue-router) working with Echo, I have narrow to the problem with Echo route in this guide
https://echo.labstack.com/cookbook/embed-resources/

Vue app can load from "/" endpoint and navigate different page within the page.

When I type URL "http://localhost/xyz" in the browser, it shown "Not Found", does it mean that Echo rewrite is need to load from "/" only then Vue could update the correct page?

        var ui embed.FS
        staticFS, err := fs.Sub(ui, "dist")
	if err != nil {
		panic(err)
	}
	assetHandler := http.FileServer(http.FS(staticFS))
	e.GET("/", echo.WrapHandler(http.StripPrefix("/", assetHandler)))
	e.GET("/assets/*", echo.WrapHandler(assetHandler))

For the comparison with Vue and mux is working fine when directly access from "http://localhost/xyz".

//go:embed all:dist
var ui embed.FS

func main() {
	srv := &http.Server{
		Addr:    ":8888",
		Handler: router(),
	}

	srv.ListenAndServe()
}

func router() http.Handler {
	mux := http.NewServeMux()

	// index page
	mux.HandleFunc("/", indexHandler)

	// static files
	staticFS, _ := fs.Sub(ui, "dist")
	httpFS := http.FileServer(http.FS(staticFS))
	mux.Handle("/assets/", httpFS)

	return mux
}

[makon]

You are trying to serve a SPA, this is a special case of static file serving. Echo provides a middleware for this case. Have a look at https://echo.labstack.com/middleware/static/

You will need to turn HTML5 on and configure your index and your static FS.

e.Use(middleware.StaticWithConfig(middleware.StaticConfig{
    Root:       "dist",
    Index:      "index.html",
    HTML5:      true,
    Filesystem: http.FS(staticFS),
}))

[bskimball]

Is there a full example of this anywhere?