Vue2.x+Webpack2 setup for Phoenix
If you want a standalone Vue+Webpack check Webpack
This is a project template for vue-cli. It is recommended to use yarn or npm 3+ for a more efficient dependency tree.
$ mix phx.new my_project --no-brunch
$ yarn global add vue-cli
$ vue init erikdsi/vue-phoenix my-project
$ cd my-project/assets
$ yarn installAdd the watcher command in your config/dev.exs
watchers: [npm: ["run", "watch", "--prefix", "assets"]]Setup your app.html.eex and/or index.html.eex:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="<%= static_path(@conn, "/css/app.css") %>">
</head>
<body>
<div id="app"></div>
<script src="<%= static_path(@conn, "/js/app.js") %>"></script>
</body>
</html>Setup your PageController
def index(conn, _params) do
render conn, "app.html"
endAnd then finally:
$ mix ecto.create
$ mix phx.server- Webpack +
vue-loaderfor single file Vue components. - Babel configured to transpile to js that works in old devices(ios 7)
- SCSS extraction
- Pug for templates(former jade)
- vue-resource So you can make http requests
- vue-router