Skip to content

HelixUI with VueJS

Jump to bottom
Ryan Johnson edited this page Feb 3, 2020 · 2 revisions

Installing

Prerequisites

  1. Latest stable NodeJS (for the npm and npx command-line utilities)
  2. helix-ui v0.18.0 or later

Assumptions

(all paths are relative to the root of the project directory)

  1. Your app was bootstrapped via @vue/cli
  2. Your app is a greenfield app (brand new codebase)
  3. Vendor assets live in public/vendor/ (coded by 3rd party)

Instructions

1. Install NPM Assets

npm install helix-ui vendor-copy
  • vendor-copy allows you to automatically copy bundled assets to your project after npm install.

2. Configure package.json

2.1 - Modify package.json

Include the following configurations:

{
  "scripts": {
    "postinstall": "vendor-copy"
  },
  "vendorCopy": [
    {
      "from": "node_modules/helix-ui/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js",
      "to": "public/vendor/webcomponents-loader.js"
    },
    {
      "from": "node_modules/helix-ui/node_modules/@webcomponents/webcomponentsjs/bundles",
      "to": "public/vendor/bundles"
    }
  ]
}
2.2 - Copy Vendor Assets

Run the following to copy files configured via the vendorCopy configuration, above.

npx vendor-copy

NOTE: You may also want to verify that your postinstall script is working as expected, by running npm install.

3. Consuming Assets in your App

3.1 - Modify public/index.html

Add the following to the bottom of the <head> element:

<!-- Required for HelixUI to function in older browsers -->
<script src="vendor/webcomponents-loader.js"></script>
3.2 - Modify src/main.js

Change the contents of src/main.js from:

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount("#app")

to this:

import Vue from 'vue'
import App from './App.vue'

import 'helix-ui/dist/css/helix-ui.min.css'
import HelixUI from 'helix-ui'

Vue.config.productionTip = false

// ignore HelixUI custom elements
Vue.config.ignoredElements = [ /^hx-/ ]

const app = new Vue({
  render: h => h(App),
})

HelixUI.initialize().then(() => {
  app.$mount('#app')
})

Compatibility

  • FYI: nesting a <div> within a <p> seems to break data binding in VueJS 2.5
    • (codepen example)
    • trying to track down the reason why this breaks
    • To be continued...

Other Notes

TBD...

Clone this wiki locally