I’m always going with laravel-mix, which is contrary to it’s name not dependent on laravel, but rather just a opinionated wrapper around webpack. It’s coming with support for vue built in.
LostKobrakai
Emily
Has anyone else had problems getting vue-brunch to build in Phoenix 1.3?
I was able to get it to work in 1.2, but after updating & building another project Brunch doesn’t seem to be concatenating components in /assets/components to /priv/static/css/components.css
1
wmnnd
Could you share your config and your application structure? Are you getting any error messages?
1
Emily
I didn’t change the file structure of the new project generator in Phoenix 1.3.
I added a folder for Vue components in assets & created a test component: assets/components/my-app.vue.
I setup brunch-config.js like this:
// Configure your plugins
plugins: {
babel: {
// Do not use ES6 compiler in vendor code
ignore: [/vendor/]
},
vue: {
extractCSS: true,
// out: '../public/styles/components.css'
out: "/priv/static/css/components.css"
}
},
The JS from my-app.vue seems to be concatenating to app.js. The css doesn’t seem to be concatenating to components.css.
I posted a question to Stackoverflow.com with the specifics & the brunch debug output here:
1
jstlroot
Hey there!
Has any of you succeeded in making Phoenix 1.3 work with Vue through Webpack?
I can’t seem to find any recent repo/tuto/blog that actually works for me. Emily, did you get there yet?
Any help is appreciated! =)
Cheers!
1
acrolink
I developed some apps with Phoenix 1.3 on backend and VueJS on frontend. Decoupled, as separate projects. Phoenix as an API only backend and all frontend written in VueJS. Worked fine.
As for Webpack, I guess it was something set up together automatically by vue-cli (the generator I used). I don’t recall that I needed to do anything with Webpack, used only defaults
2
jstlroot
Firstly, thank you for your quick reply!
The decoupled approach interests me a lot as well. It makes it possible to swap one side or another more naturally as needed and I think it’s more scalable as well.
One question that comes to mind is how do you serve the client-side? I guess you’re not using the Phoenix server to do it?
Also, (forseeing a follow-up question) are you using the same solution (guessing two separate servers) for production? I see that with npm run build, I can build it for use in production. Do I simply use a generic web server like Apache from there? I apologize for the non Elirix-related question. 
Can’t wait to know your take on this! =)
0
acrolink
@jstlroot As for VueJS production, yes you can use any web server to serve the client side application. Under development and production you need to do this with your web server (I use Nginx):
Redirect all requests to the VueJS application except for all /api routes, they should be sent to the Phoenix back-end.
Yes, for development I use 3 servers actually:
Client >> 1. Nginx >>
2. VueJS or
3. Phoenix
Production:
Client >> 1. Nginx >>
Serving static files directly (HTML/JS)
or 2. passing request to Phoenix
0
jstlroot
paulanthonywilson
FYI, just got Vue running on edge(ish) Phoenix, which now defaults to Webpack. Here’s the diff between the default assets/webpack.config.js and the version running Vue. (I put the view app in ./js along with the other Javascripts.
const path = require('path');
const glob = require('glob');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
+ const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = (env, options) => ({
optimization: {
minimizer: [
new UglifyJsPlugin({ cache: true, parallel: true, sourceMap: false }),
new OptimizeCSSAssetsPlugin({})
]
},
entry: {
'./js/app.js': ['./js/app.js'].concat(glob.sync('./vendor/**/*.js'))
},
output: {
filename: 'app.js',
path: path.resolve(__dirname, '../priv/static/js')
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
+ {
+ test: /\.vue$/,
+ loader: 'vue-loader'
+ },
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader']
}
]
},
+ resolve: {
+ alias: {
+ 'vue$': 'vue/dist/vue.esm.js'
+ },
+ extensions: ['*', '.js', '.vue', '.json']
+ },
plugins: [
new MiniCssExtractPlugin({ filename: '../css/app.css' }),
new CopyWebpackPlugin([{ from: 'static/', to: '../' }]),
+ new VueLoaderPlugin(),
]
});
Putting this here in case it saves someone a bit of time when 1.4 comes out.
6