rivet-vue
v0.0.36
Published
## Dependencies #### Vue 3.2.45 vue.global(.prod).js #### Rivet 2.2.0 JS #### Rivet 2.2.0 CSS
Downloads
16
Readme
Rivet-vue
Dependencies
Vue 3.2.45 vue.global(.prod).js
Rivet 2.2.0 JS
Rivet 2.2.0 CSS
CJS (CommonJS) / ESM (EcmaScript Modules)
Usage
Rivet-Vue is being used in a vue application where the application has a root vue component and other vue components
nested within it. A common scenario would be a vue application created by vite, which is a SPA (single page application)
Setup
File: main.js
// ESM / UMD syntax
import { createApp } from 'vue'
import App from './App.vue'
import RivetVue from 'rivet-vue'
import { init } from 'rivet-vue/dist/[email protected]'
import 'rivet-vue/dist/[email protected]'
init()
const app = createApp(App)
app.use(RivetVue)
app.mount('#app')EM (Embedded)
Usage
Rivet-Vue is being used in a vue application where the application DOES NOT have a root vue component. The components
are globally available inside the HTML as long as they are nested within where the vue application is mounted. A common
scenario would be a regular HTML, (non Razor page) .Net, or NodeJS page.
Setup
File: app.js
// The embedded version is a special format where the Vue instance must be available
// rivet-vue.em.js must be moved from node_modules/rivet-vue/dist/rivet-vue.em.js
// directory to the public directory because it is not exposed as an entry point
// in rivet-vue
import RivetVue from '/js/rivet-vue.em.js'
const app = Vue.createApp({})
app.use(RivetVue)
app.mount('#app')
File: index.html
<!doctype html>
<html>
<head>
<!-- Important: [email protected] must be moved from node_modules/rivet-vue/dist -->
<!-- directory to a public directory because it is not used in -->
<!-- in the context of an es module even though app.js is a module -->
<!-- type -->
<!-- This is the minified CDN version -->
<!-- "https://unpkg.com/[email protected]/css/rivet.min.css" -->
<link type="text/css" rel="stylesheet" href="/css/[email protected]" />
<!-- Important: This cannot be moved into the app.js -->
<!-- Important: Vue must be moved from node_modules/rivet-vue/dist directory -->
<!-- to a public directory because it is not used in the context -->
<!-- of an es module even though app.js is a module type. -->
<!-- It provides the global instance of Vue that is needed by -->
<!-- rivet-vue.em.js -->
<!-- Production build -->
<!-- The vue.global.prod.js from node_modules/vue/dist -->
<script src="/[email protected]"></script>
<!-- Development build -->
<!-- The vue.global.js from node_modules/vue/dist -->
<!-- <script src="/[email protected]"></script> -->
</head>
<body>
<div id="app"></div>
<script type="module" src="/js/app.js"></script>
<!-- Important: [email protected] must be moved from node_modules/rivet-vue/dist -->
<!-- directory to a public directory because it is not used in -->
<!-- in the context of an es module even though app.js is a module -->
<!-- type -->
<!-- This is the minified CDN version -->
<!-- "https://unpkg.com/[email protected]/js/rivet.min.js" -->
<script src="/js/[email protected]"></script>
<script>
Rivet.init()
</script>
</body>
</html>