My first hands on experience on learning the css library Bulma & JS Framework VueJS. This demo website is a way to test out the features of the two libraries.

Please click here for the demo website

# clone the repository git clone https://github.com/faisaltheparttimecoder/bulma-vuejs-demo-website.git # Navigate to the folder cd bulma-vuejs-demo-website # install dependencies [ Navigate to the link https://nodejs.org/en/download/ if npm is not installed on your machine ] npm install # run the website locally npm run dev # Once started, on your browser navigate to the below URL http://localhost:8080 # build for production with minification npm run build # build for production and view the bundle analyzer report npm run build --report 

• VueJS router has issue with the "history" mode, more details here
• To fix this, the server used is "express" server and used the "connect-history-api-fallback" to fallback, the configuration is on the file "server.js" which is part of the repo.
• After the production build npm run build, run the command node server.js to start the webserver and see if all the routes work perfectly.
• When pushing to Heroku or Cloud foundry, make sure to change the line after the build npm run build is completed in the package.json file

"build": "node build/build.js"

to

"build": "node server.js"

Most of the code are raw vueJS & Bulma CSS (that was the intention for learning purpose). The only plugin used are

• ChartKick for charts
• vuetrend for trend lines
• JsonPlaceHolder for all the fake data.
• Templates reference