# Installation
The preferred way to use Vue Formulate is to install via your favorite JavaScript package manager.
# NPM
npm install @braid/vue-formulate
# Yarn
yarn add @braid/vue-formulate
# Direct download
Alternatively, if your project doesn't have a build process, you can download the repository and manually link to the minified version:
<script src="/vue-formulate/dist/formulate.min.js"></script>
Note
Due to DOM limitations, when mounting Vue Formulate in DOM templates (outside of single-file components) all the component names will need to be lower-cased, hyphen separated and with a closing tag.
<FormulateInput />
⭢ <formulate-input></formulate-input>
# CDN
Similar to a direct download, you can load Vue Formulate directly off of a CDN like JSDeliver.
# Add to Vue
Once Vue Formulate has been downloaded you need to install it with Vue.
import Vue from 'vue'
import VueFormulate from '@braid/vue-formulate'
Vue.use(VueFormulate)
TIP
When loading Vue Formulate as a commonJS module (think require()
) it may be
necessary to use VueFormulate.default
when registering with Vue:
const VueFormulate = require('@braid/vue-formulate')
Vue.use(VueFormulate.default)
# Configuration options
If you need custom configuration options, you can pass a second argument with an object of configuration options.
Vue.use(VueFormulate, options)
# Nuxt
It's easy to use Vue Formulate on Nuxt too. A working example is available.
# plugins/vue-formulate.js
import Vue from 'vue'
import VueFormulate from '@braid/vue-formulate'
Vue.use(VueFormulate)
# nuxt.config.js
export default {
plugins: [
'~/plugins/vue-formulate',
]
}
# Styling/theming
If you’d like to use the default theme (the one used in these docs), you can easily include that css on your page. Vue Formulate is also extremely easy to theme on your own.
# IE11 support
While Internet Explorer 11 is supported polyfills for ES2015 language features are not included in Vue Formulate. For those who do require IE11 support we recommend using polyfill.io or similar service to shim ES2015 features.
<script src="https://polyfill.io/v3/polyfill.min.js?features=es2015"></script>