Mojolic...e::Vuejs(3)

🎀 NAME 🎀

okay bestie, welcome to Mojolicious::Plugin::AssetPack::Pipe::Vuejs (3), straight out of User Contributed Perl Documentation. This one is all about one job: process .vue files. 💅

• Mojolicious::Plugin::AssetPack::Pipe::Vuejs — process .vue files.

🧚 DESCRIPTION 🧚

First thing first: this module is EXPERIMENTAL. It is based on homebrewed regexes instead of running the code through an external nodejs binary! 😭

also, heads up: this pipe could get pulled completely from the Mojolicious::Plugin::AssetPack distribution if the problem is too hard to solve.

✨ SYNOPSIS ✨

Currently only script and template are 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 .vue 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!\"}}
"})();

🔧 METHODS 🔧

🛠️ process 🛠️

See process in Mojolicious::Plugin::AssetPack::Pipe.

🌈 SEE ALSO 🌈

Go peek at Mojolicious::Plugin::AssetPack.

---

🫶 that's the whole page, bestie. it shipped with perl v5.42.0, dated 2024-12-12, and it's filed under Mojolic...e::Vuejs(3). periodt. 💅