vue.js - Brunch.io Configuration For VueJS Components -


i have vuejs component contains js, css, , template. i’m working inside phoenix/elixir skeleton.

i need configure brunch concatenate js vendor.js, css vendor.css , template templates/template_name/template_name.html.eex.

can done? if so, how?

sample vuejs component:

<style>     .test_component h2 {      } </style>  <template>     <div class="test_component">      </div> </template>  <script>     module.exports = {         data: function () {             return {              }         }     } </script> 

current brunch-config.js:

exports.config = {   // see http://brunch.io/#documentation docs.   files: {     javascripts: { //      jointo: "js/app.js"        // use separate vendor.js bundle, specify 2 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)/        }       //       // change 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: {     // option sets should place non-css , non-js assets in.     // default, set "/web/static/assets". files in directory     // copied `paths.public`, "priv/static" default.     assets: /^(web\/static\/assets)/   },    // phoenix paths configuration   paths: {     // dependencies , current project directories watch     watched: [       "deps/phoenix/web/static",       "deps/phoenix_html/web/static",       "web/static",       "test/static"     ],      // compile files     public: "priv/static"   },    // configure plugins   plugins: {     babel: {       // not use es6 compiler in vendor code       ignore: [/web\/static\/vendor/]     }   },    modules: {     autorequire: {       "js/app.js": ["web/static/js/app"]     }   },    npm: {     enabled: true,     // whitelist npm deps pulled in front-end assets.     // other deps in package.json excluded bundle.     whitelist: ["phoenix", "phoenix_html", "vue"]   } }; 


Comments

Popular posts from this blog

get url and add instance to a model with prefilled foreign key :django admin -

css - Make div keyboard-scrollable in jQuery Mobile? -

ruby on rails - Seeing duplicate requests handled with Unicorn -