Perl Mojolicious and Vue3

This template should help get you started developing with Vue 3 in Vite with Mojolicious.

This project uses a small Perl base image that is around 65Mb with a multi-stage build that results in a final image of around 67Mb. Your resulting image sizes may vary based on what dependencies you add to the mix.

Perl Dependencies

To add additional Perl dependencies, use the cpanfile. Initially the project only has a single dependency of Mojolicious

cpanfile

# version: 0.01
requires 'Mojolicious';

Mojolicious

To handle the static assets that Vue produces, I added a route controller that serves the index.html that is produced after running npm run build. In the docker build process, the dist folder is copied to /app/public. Requests coming into the base url / are routed to the controller MojoVue::Vue::index

MojoVue.pm

  # Normal route to controller
  $r->get('/')->to('Vue#index');

In ./lib/MojoVue/Controller/Vue.pm the index subroutine returns the static index.html file from ./public

sub index($self) {
    # Serves up index.html from the public directory
    $self->reply->static('index.html');
}

Handling vue routes in a Mojolicious Application

To handle vue routes using vue-router, we need to add a "catch-all" Mojolicious route handler. The last route in MojoVue.pm does this. Any named routes before this will be handled by the Mojolicious router, so make sure that there are no overlapping route names if you implement server-side routes.

MojoVue.pm

# handle vue router, routes anything that does not match previous
# definitions to vue. 404 should be handled in the vue router
$r->any('/*')->to('Vue#index');

This will route any routes that do not match defined Mojolicious routes to the vue-router.

Vue Single Page Applications (SPA)

You can also mix in or build a project with many single page apps using Mojolicious templates and Vue.js.

MojoVue.pm

$r->get('/hello')->to('Vue#hello');

This Mojolicious route sends the request to ./lib/MojoVue/Controller/Vue.pm and serves up the template from templates/vue/hello.html.ep which is a Vue SPA.

Autogenerated documentation from Vue

Recommended IDE Setup

VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).

Customize configuration

See Vite Configuration Reference.

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

Compile and Minify for Production

npm run build

Lint with ESLint

npm run lint

Docker Misc

Docker Build

docker build --tag mojo-vue:latest .

Docker Run

docker run -it --init -p 8080:8080 mojo-vue