[Vuejs]-Is it possible to work with vue-loader under brunch?

by

0👍

I have a similar set up, using Phoenix 1.3.

app.js:

import "phoenix_html"

import Vue from 'vue'

import App from "../vue/components/MyApp.vue"
Vue.component('my-app', MyApp);

import Test from "../vue/components/Test.vue"
Vue.component('test', Test);

import axios from 'axios';

var vm = new Vue({
    el: '#app',
    render: h => h(MyApp)
})

brunch-config.js

exports.config = {
  // See http://brunch.io/#documentation for docs.
  files: {
    javascripts: {
      joinTo: "js/app.js"
    },
    stylesheets: {
      joinTo: "css/app.css",
      order: {
        after: ["priv/static/css/app.scss"] // concat app.css last
      }
    },
    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 "/assets/static". Files in this directory
    // will be copied to `paths.public`, which is "priv/static" by default.
    assets: /^(static)/
  },

  // Phoenix paths configuration
  paths: {
    // Dependencies and current project directories to watch
    watched: ["static", "css", "js", "vendor", "vue"],
    // Where to compile files to
    public: "../priv/static"
  },

  // Configure your plugins
  plugins: {
    babel: {
      // Do not use ES6 compiler in vendor code
      ignore: [/vendor/]
    },
    copycat: {
      "fonts": ["node_modules/font-awesome/fonts"] // copy node_modules/font-awesome/fonts/* to priv/static/fonts/
    },
    sass: {
      options: {
        includePaths: ["node_modules/bootstrap/scss", "node_modules/font-awesome/scss"], // tell sass-brunch where to look for files to @import
        precision: 8 // minimum precision required by bootstrap
      }
    },
    vue: {
      extractCSS: true,
      out: '../priv/static/css/components.css'
    }
  },

  modules: {
    autoRequire: {
      "js/app.js": ["js/app"]
    }
  },

  npm: {
    enabled: true,
    globals: { // Bootstrap JavaScript requires both '$', 'jQuery', and Tether in global scope

      $: 'jquery',
      jQuery: 'jquery',
      Tether: 'tether',
      bootstrap: 'bootstrap' // require Bootstrap JavaScript globally too
    }
  }
};

package.json

{
  "repository": {},
  "license": "MIT",
  "scripts": {
    "deploy": "brunch build --production",
    "watch": "brunch watch --stdin"
  },
  "dependencies": {
    "axios": "^0.16.2",
    "bootstrap": "^4.0.0-alpha.6",
    "eslint-plugin-vue": "^2.1.0",
    "font-awesome": "^4.7.0",
    "phoenix": "file:../deps/phoenix",
    "phoenix_html": "file:../deps/phoenix_html",
    "vue": "^2.3.4",
    "vue-brunch": "^2.0.1"
  },
  "devDependencies": {
    "babel-brunch": "6.0.6",
    "babel-plugin-transform-runtime": "^6.23.0",
    "brunch": "2.10.7",
    "clean-css-brunch": "2.10.0",
    "copycat-brunch": "^1.1.0",
    "eslint": "^3.19.0",
    "eslint-config-airbnb-base": "^11.2.0",
    "eslint-plugin-import": "^2.7.0",
    "holderjs": "^2.9.4",
    "node-sass": "^4.5.3",
    "sass-brunch": "^2.10.4",
    "uglify-js-brunch": "2.1.1"
  }
}

I created a directory at assets/vue/components, which is where I put MyApp.vue and Test.vue

If things go right, your JS files should be compiled and be in priv/static/js/app.js

The problem with this setup is you will pull in these components in every page, if you are using a MPA. Brunch’s entryPoint (instead of joinTo) looks like it could help with this, but still have problems getting that set up right.

Leave a comment