title: Brunch.io Configuration For VueJS Components
body: <p>I have a VueJS component which contains JS, CSS, and a Template.  I’m working inside a Phoenix/Elixir skeleton.</p>
  
  <p>I need to configure Brunch to concatenate the JS to vendor.js, the CSS to vendor.css and the Template to templates/template_name/template_name.html.eex.</p>
  
  <p>Can it be done? If so, how? </p>
  
  <p><strong>Sample VueJS component:</strong></p>
  
  <pre><code>&lt;style&gt;
      .test_component h2 {
  
      }
  &lt;/style&gt;
  
  &lt;template&gt;
      &lt;div class="test_component"&gt;
  
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      module.exports = {
          data: function () {
              return {
  
              }
          }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>Current brunch-config.js:</strong></p>
  
  <pre><code>exports.config = {
    // See http://brunch.io/#documentation for docs.
    files: {
      javascripts: {
  //      joinTo: "js/app.js"
  
        // To use a separate vendor.js bundle, specify two files path
        // https://github.com/brunch/brunch/blob/stable/docs/config.md#files
         joinTo: {
          "js/app.js": /^(web\/static\/js)/,
          "js/vendor.js": /^(web\/static\/vendor)|(deps)/
         }
        //
        // To change the order of concatenation of files, explicitly mention here
        // https://github.com/brunch/brunch/tree/master/docs#concatenation
        // order: {
        //   before: [
        //     "web/static/vendor/js/jquery-2.1.1.js",
        //     "web/static/vendor/js/bootstrap.min.js"
        //   ]
        // }
      },
      stylesheets: {
        joinTo: "css/app.css"
      },
      templates: {
        joinTo: "js/app.js"
      }
    },
  
    conventions: {
      // This option sets where we should place non-css and non-js assets in.
      // By default, we set this to "/web/static/assets". Files in this directory
      // will be copied to `paths.public`, which is "priv/static" by default.
      assets: /^(web\/static\/assets)/
    },
  
    // Phoenix paths configuration
    paths: {
      // Dependencies and current project directories to watch
      watched: [
        "deps/phoenix/web/static",
        "deps/phoenix_html/web/static",
        "web/static",
        "test/static"
      ],
  
      // Where to compile files to
      public: "priv/static"
    },
  
    // Configure your plugins
    plugins: {
      babel: {
        // Do not use ES6 compiler in vendor code
        ignore: [/web\/static\/vendor/]
      }
    },
  
    modules: {
      autoRequire: {
        "js/app.js": ["web/static/js/app"]
      }
    },
  
    npm: {
      enabled: true,
      // Whitelist the npm deps to be pulled in as front-end assets.
      // All other deps in package.json will be excluded from the bundle.
      whitelist: ["phoenix", "phoenix_html", "vue"]
    }
  };
  </code></pre>