Mojolicious::Plugin::AssetPack::Pipe::Vuejs

This modules is EXPERIMENTAL and based on homebrewed regexes instead of running the code through an external nodejs binary!

This pipe could get pulled completely from the Mojolicious::Plugin::AssetPack distribution if the problem is too hard to solve.

Currently only "script" and "template" is supported. "style" is not yet supported.

Here is an example ".vue" file:

  <template>
    <h1 :id="id">Example</h1>
    <button @click="toggle" :disabled="loading">{{loading ? "loading" : "click me!"}}</button>
  </template>
  <script>
  var initial = false;
  module.exports = {
    data: function() {
      return {id: id, loading: initial}
    },
    methods: {
      toggle: function() {
        this.loading = !this.loading;
      }
    }
  };
  </script>

The vuejs file above produces this output:

  (function(){
  var initial = false;
  Vue.component("example", {
    data: function() {
      return {id: id, loading: initial}
    },
    methods: {
      toggle: function() {
        this.loading = !this.loading;
      }
    },
  template: "
    Example
    {{loading ? \"loading\" : \"click me!\"}}
  "}))();

Mojolicious::Plugin::AssetPack.