A try to write my presentations for school in HTML5, CSS3 and Javascript using Vuejs.

This repository contains some evaluation and research code.

About the name baldr

Baldr is the name of a nordic
god. He is the of god of light.

import Vue from 'vue'
import Component from 'vue-class-component'
import { Prop } from 'vue-property-decorator'
import { mapGetters, createNamespacedHelpers } from 'vuex'

import Vue from 'vue'
import Component from 'vue-class-component'
import Vuex from 'vuex'
import { Prop } from 'vue-property-decorator'

// vue
import { CreateElement, VNode, VNodeData, VueConstructor } from 'vue'
import { Prop, Watch } from 'vue-property-decorator'

// vuex
import { mapGetters, mapActions, createNamespacedHelpers } from 'vuex'
import Vuex from 'vuex'

// vue-router
import { RouteConfig, Route, NavigationGuardNext } from 'vue-router'
import VueRouter from 'vue-router'

Installation / Building

npm install -g lerna
lerna bootstrap


sudo npm install -g npm-check-updates
lerna exec "ncu -u"
lerna exec "npm update"

Sort package.json

sudo npm install -g sort-package-json
lerna exec "sort-package-json"


lerna publish


lerna run test

Coding style

lerna run lint


  "main": "src/main.js"

The Baldr project follows the standardJS style guides.


Node packages

const path = require('path')

const jquery = require('jquery')

// Project packages.
const { Library, AlphabeticalSongsTree } = require('@bldr/songbook-base')

// Globals.
const config = getConfig()

Vue imports

// Vue plugins.
import shortcuts from '@bldr/shortcuts'

// Vue components.
import StartPage from './views/StartPage.vue'

Private fields

class Foo {
  constructor() {
    this.bar_ = computeBar()


Component name

  • At least two words
  • MyComponent.vue (Pascal Case)
  • name: 'MyComponent' (Pascal Case)
  • Top level Vue component css class, prefix with vc = Vue component: Snake Case
    • HTML: class="vc_my_component"
    • CSS: .vc_my_component


Description in 3 places:

  • main.js above @module
  • package.json template

[![Build Status](](
[![GitHub repo size](](

# @bldr/package-name


Convert imports

const (.*) = require\((.*)\)
import $1 from $2