Apply namespace in one place then reflect throughout the project

[AaronKow]

It would be good if we have a way to define the namespace variable in one place then it would be used throughout the css and HTML.

<template>
  <a
    :class="`${componentClass}`">
      <slot></slot>
  </a>
</template>

<script>
import {PROJECT_NAME} from './constants';

export default {
  name: "Link"
  props: {
    componentClass: {
      type: String,
      default: `${PROJECT_NAME}-link`
    }
  }
}
</script>

<style lang="scss">
.#{$project-name}-link {
  color: #111;
  text-decoration: none;
}
</style>

So, if we setup in this way that, we just need to change the variable in one place, then the namespace will be reflected throughout the project files.

[kyleoliveiro]

Can we use the config object in our package.json to define the project namespace?

"config": {
    "project": {
      "name": "Cobblestone",
      "shortName": "cbs",
      "description": "Modern static site framework and generator",
      "bgColor": "#ffffff",
      "themeColor": "#020202"
    }
}

Also, #{$project-name}/${PROJECT_NAME} is a bit long. We need to find a way to tackle the verbosity problem (maybe just a shorter variable name?).

Aside from that, to use the project shortName in a Vue SFC file, we can add it to the component object during creation, rather than have to define a componentClass prop. This approach also keeps the class declarations where they should be – inside the <template> tags.

<template>
  <a
    :class="`${projectName}`-link">
      <slot></slot>
  </a>
</template>

<script>
import {PROJECT_NAME} from './constants';

export default {
  name: "Link",
  created() {
    this.projectName = PROJECT_NAME;
  }
}
</script>

[kyleoliveiro]

Then we can wrap import {PROJECT_NAME} from './constants'; and the created() method into a Vue mixin and we won't have to do this stuff in every component file :)