---
name: "Mojolicious::Plugin::AssetPack::Pipe::Vuejs"
section: "3pm"
platform: "linux"
package: "libmojolicious-plugin-assetpack-perl"
version: "2.15-1"
release: "Debian 13 (Trixie)"
platforms: ["linux"]
url: "https://new.carta.tech/Mojolicious::Plugin::AssetPack::Pipe::Vuejs"
---

# Mojolicious::Plugin::AssetPack::Pipe::Vuejs(3pm)

Process .vue files

## NAME

Mojolicious::Plugin::AssetPack::Pipe::Vuejs - Process .vue files

## DESCRIPTION

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.

## SYNOPSIS

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!\"}}
  "}))();
```

## METHODS

### process

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

## SEE ALSO

Mojolicious::Plugin::AssetPack.