Setting up Vue and SASS (Trello clone P3)

This episode is part 3 in a Phoenix 1.4 Trello Clone series, with a focus on testing:

• Warmup: Elixir TDD with ExUnit
• Part 1: Fixing generated Phoenix tests
• Part 2: Finishing the scaffold
• Part 3: Setting up Vue and SASS (this page)
• Part 4: Styling cards and todo lists (members only)

It's time to move on to the front-end! In this episode we configure Webpack for Vue and SASS/SCSS, and hook them into our Phoenix app.

Setting up SASS is straight forward. It will work the same as it did for the earlier [Phoenix 1.4 Chat Server] series. We'll just replace our app.css with an app.css, it will still import the default phoenix.css and we'll go about our business. With Vue, on the other hand, there are a few more choices.

What we're going to do for this app, is send the lists of cards from our controller in the standard back-end MVC way:

def index(conn, _params) do
  lists = Task.list_lists()
  render(conn, "index.html", lists: lists)
end

Then our templates, will parse the JSON with the standard decoder, Jason:

<section id="boards" class="row"
  data-lists="<%= Jason.encode!(@lists) %>">
</section>

Once the document is loaded and ready, Vue will take over the section with the ID "boards" and that will be the meat of our app. We don't do much building in this episode, but sometimes just getting the tooling set up and getting anything to render on the screen is a bigger hurdle than the actual building once a project is underway! This should also be useful as a standalone episode for someone working on a Phoenix project and looking to bring in Vue and/or SCSS (as long as it's Phoenix 1.4+ or at least using Webpack).

(Source code available for premium members)