logo
  • Start here
  • Episodes
  • Articles
  • Log in
  • Sign up

Setting up Vue and SASS (Trello clone P3)

Topics:
Mellow
Webpack
Vue
Sass
Phoenix

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)

Share

Request a free email course
Back to index

3 Comments

Log in to leave a comment

there is weird bug if the list name contain more than one word for ex: "First List" while <%= inspect Jason.encode!(@lists) %> shows the list is correctly encoded but "JSON.parse(el.dataset.lists)" in App.js throw an error saying Unexpected end of JSON input

while debugging I found that el.dataset.lists contain "{"name":"first"" only and for whatever reason it cut off the rest of the string after the first space.

do you know the reason why?

- SuperMedo · 11 months ago

@SuperMedo, Is the value your data-lists attribute quoted?

- alchemist · 11 months ago

@alchemist, Nope, thanks I didn't notice it wasn't quoted and it now display values correctly. also I just watched part 5 where you address the issue :D

- SuperMedo · 11 months ago
Alchemist Camp 2017-2020
Hosted on Digital Ocean
Terms and Conditions