Pset 3: Vue

The goal of this pset is to learn Vue.js and the vue-cli tooling. You will adapt pset 2 to incorporate all feedback you have received and add and attractive front-end based on Vue.

For background on Vue, see the wiki page.

Ground Rules

  • Your entire application should be contained within a single vue project created with vue-cli.
  • All requirements from pset 2 still apply. Make sure to incorporate any feedback you received on psets 1 and 2.
  • Your application must contain at least 3 single-file Vue components (in .vue files) that you write. Some obvious candidates are a component for the overall site (akin to the default App.vue), a component to display a table of search results, and a component to display object details.
  • Your application must use at least 3 third-part view components. We strongly recommend starting with the (vue-bootstrap)[https://bootstrap-vue.js.org/] package, which contains a bunch of useful components to make attractive form elements, tables, and other useful things. It’s fine to use at least three of these components and call it a day. (Bootstrap is a pile of CSS code and some javascript to make attractive-looking, themable web sites that work on both desktop and mobile browsers. The latter ability is usually called “responsive design.” Bootstrap was created by Twitter and had a major role in defining the current, sterile aesthetic of modern web pages. However, it is easy to use, well supported, and very convenient.)
  • Your application must use pagination or infinite scrolling rather than retrieving all records at once. The easiest way to implement this will probably be to use vue-bootstrap’s pagination-nav component. You will also need to update your server code so it doesn’t coalesce all the search results behind the scenes.
  • Your application should be tolerably attractive and functional. Details about an individual object should not replace the table of search results. Full size images should open in another tab or in a dialog with the current page. New search results should replace old ones. It should never be necessary to refresh the page in order to get back to the search form and run a new search.
  • The browser’s back button does not have to take you back through past search results or work in any other reasonable way. It is possible to get the back button to work intuitively using “client-side routing” and the (vue-router)[router.vuejs.org] package, but it blurs the line between client-side and server-side code in very confusing ways. You may want to learn how to do this as part of you project, but don’t worry about it now.

Submission

Submit a zip file of your node project via the dashboard. You do not need to include the node_modules subdirectory, but there is no harm in doing so.