Vue.js and Webwork3

Vue.js and Webwork3

Webwork3, the new single-page application interface for webwork, is written using the Vue.js javascript framework.

Directory Structure

webwork3       // main directory for webwork3
  dist         // location of index.html and related libraries.  This is filled automatically with webpack.
  src          // source directory of all vue files and related
    mixins     // directory for vue mixins
    App.vue    // the topmost vue component
    main.js    // the main javascript file
    store.js   // the vuex store information
    common.js  // all common constants and functions used throughout the interface. 
    router.js  // information about the vue-router. 
    components // main directory for vue components
      common_components 
      views    // components for ClassListManager, Library, ProblemSetsManager, etc. 

Generic Vue component

All of the vue components in webwork3 are Single-File components that consist of at least two parts. The standard example from the vuejs website is

<template>
  <p>{{ greeting }} World!</p>
</template>

<script>
module.exports = {
  data: function () {
    return {
      greeting: 'Hello'
    }
  }
}
</script>

<style scoped>
p {
  font-size: 2em;
  text-align: center;
}
</style>

which has

• A template tag which is the html code to render the component
• A script tag which is where the data and any needed javascript coding for the component is located.
• A style tag (if needed) that produces any CSS for the page.

A webwork3 component

The following is the vue component for the list of courses, located in src/CourseList.vue

<template>
  <div>
    <b-navbar toggleable="lg" type="dark" id="top-navbar" class="fixed-top" >
      <b-navbar-brand href="#"><img id="wwlogo" src="/webwork3/images/webwork_square.svg"></b-navbar-brand>
      <b-navbar-brand>WeBWorK</b-navbar-brand>
      <b-navbar-brand>List of Courses </b-navbar-brand>
    </b-navbar>
    <b-container>
      <b-row>
        <b-col cols=3>
          <b-list-group>
            <b-list-group-item v-for="course in courses" :key="course">
              <router-link :to="'/courses/' + course + '/login'">{{course}}</router-link>
            </b-list-group-item>
          </b-list-group>
        </b-col>
      </b-row>
    </b-container>
</div>
</template>

<script>
import axios from 'axios'

export default {
  data: function () {
    return {
      courses: []
    }
  },
  created(){
    axios.get("/webwork3/api/courses")
      .then( (response) => {
        this.courses = response.data;
      })
  }
}
</script>

This is a relatively simple component that doesn't contain other components.