Custom Vue.js Themes Using Clarion

Vue.js is a powerful JavaScript framework for building advanced user interfaces. From the Vue.js documentation:

"Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

Starting Your Project

Before you get started, make sure Clarion and the Vue CLI are installed:

npm install -g clarion vue-cli

After the install is finished, create your new project by running the following commands (make sure you indicate you would like to use SASS if you want to use SASS or SCSS):

vue init webpack-simple my-project
cd my-project
npm install

Adding Clarion

Adding Clarion to the project can be done in 4 easy steps:

1. Create a Folder For Your Styles

Under the src directory create a new folder called sass.

Note: By default Clarion will look for the Clarion CSS Architecture in folders called sass, scss, or less.

2. Navigate to Your New Directory

Using your command line or terminal, navigate to your new sass folder:

cd src/sass

3. Add Clarion

In order to avoid overriding any of the files provided by the You can add the Clarion architecture by using the --only or -O option. This will only install the Clarion Style Architecture.

clarion new -O

4. Add Your Styles to main.js

In the src folder open the main.js file and import your styles:

import './sass/styles.scss';

This will include the styles in the build process.


You should be able to use the Clarion CLI as you normally would. No additional configuration is necessary.