Skip to content

Commit d374c53

Browse files
michaeltintiucmichaeltintiuc
committed
Add cookbook example, update rollup config. Fix issues for UMD build. Fix issues with multiple router views
1 parent a739359 commit d374c53

File tree

5 files changed

+109
-26
lines changed

5 files changed

+109
-26
lines changed

‎build/rollup.config.js‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import path from 'path'
12
import buble from 'rollup-plugin-buble'
23
import vue from 'rollup-plugin-vue'
34
import { terser } from 'rollup-plugin-terser'
@@ -11,11 +12,13 @@ const banner = `
1112
*/
1213
`
1314

15+
const resolve = _path => path.resolve(__dirname, '../', _path)
16+
1417
function outputConfig(suffix, format, opts = {}) {
1518
return Object.assign(
1619
{
17-
file: `./dist/ion-router-vue${suffix}.js`,
18-
name: 'IonRouterVue',
20+
file: resolve(`./dist/ion-vue-router${suffix}.js`),
21+
name: 'IonVueRouter',
1922
sourcemap: true,
2023
format,
2124
banner,
@@ -26,7 +29,7 @@ function outputConfig(suffix, format, opts = {}) {
2629

2730
function baseConfig() {
2831
return {
29-
input: './src/router.js',
32+
input: resolve('./src/index.js'),
3033
output: [
3134
outputConfig('', 'umd', { globals: {} }),
3235
outputConfig('.esm', 'esm'),

‎cookbook/index.html‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Ionic v4 + Vue.js - Basic routing</title>
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta name="format-detection" content="telephone=no">
8+
<meta name="msapplication-tap-highlight" content="no">
9+
<script src="https://unpkg.com/vue"></script>
10+
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
11+
<script src="../dist/ion-vue-router.js"></script>
12+
<script src="https://unpkg.com/@ionic/core@4.0.0-alpha.11/dist/ionic.js"></script>
13+
<link rel="stylesheet" href="https://unpkg.com/@ionic/core@4.0.0-alpha.11/css/ionic.min.css"/>
14+
</head>
15+
16+
<body>
17+
<ion-app>
18+
<ion-vue-router></ion-vue-router>
19+
</ion-app>
20+
21+
<script>
22+
const Toolbar = Vue.component('Toolbar', {
23+
name: 'Toolbar',
24+
props: { title: String, backURL: String },
25+
template: `<ion-header>
26+
<ion-toolbar>
27+
<ion-buttons slot="start">
28+
<ion-back-button :default-href="backURL"/>
29+
</ion-buttons>
30+
<ion-title>{{ title }}</ion-title>
31+
</ion-toolbar>
32+
</ion-header>`
33+
})
34+
35+
const Home = {
36+
template: `<ion-page class="ion-page">
37+
<toolbar title="Home"/>
38+
<ion-content class="ion-content" padding>
39+
<router-link to="/page">Go to page</router-link>
40+
</ion-content>
41+
</ion-page>`
42+
}
43+
44+
const Page = {
45+
template: `<ion-page class="ion-page">
46+
<toolbar title="Page" backURL="/"/>
47+
<ion-content class="ion-content" padding>
48+
<ion-button @click="goHome">Go home</ion-button>
49+
</ion-content>
50+
</ion-page>`,
51+
methods: {
52+
goHome() {
53+
this.$router.back()
54+
}
55+
}
56+
}
57+
58+
Vue.config.ignoredElements.push(/^ion-/)
59+
60+
new Vue({
61+
router: new IonVueRouter({
62+
routes: [
63+
{ path: '/', component: Home },
64+
{ path: '/page', component: Page },
65+
],
66+
}),
67+
}).$mount('ion-app')
68+
</script>
69+
</body>
70+
</html>

‎package.json‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,22 @@
11
{
2-
"name": "@modus/ion-router-vue",
2+
"name": "@modus/ion-vue-router",
33
"version": "1.0.0",
4-
"description": "Ion Router Vue",
4+
"description": "Ion Vue Router",
55
"homepage": "https://moduscreate.com",
66
"author": "Michael Tintiuc <michael.tintiuc@moduscreate.com>",
77
"user": "michaeltintiuc",
88
"license": "MIT",
9-
"repository": "github:ModusCreateOrg/ion-router-vue",
10-
"main": "dist/ion-router-vue.common.js",
11-
"module": "dist/ion-router-vue.esm.js",
12-
"unpkg": "dist/ion-router-vue.js",
13-
"jsdelivr": "dist/ion-router-vue.js",
9+
"repository": "github:ModusCreateOrg/ion-vue-router",
10+
"main": "dist/ion-vue-router.common.js",
11+
"module": "dist/ion-vue-router.esm.js",
12+
"unpkg": "dist/ion-vue-router.js",
13+
"jsdelivr": "dist/ion-vue-router.js",
1414
"files": [
1515
"src/",
1616
"dist/*.js"
1717
],
1818
"bugs": {
19-
"url": "https://github.com/ModusCreateOrg/ion-router-vue/issues"
19+
"url": "https://github.com/ModusCreateOrg/ion-vue-router/issues"
2020
},
2121
"keywords": [
2222
"ionic",
@@ -34,7 +34,7 @@
3434
"scripts": {
3535
"dev": "rollup -c ./build/rollup.config.js",
3636
"watch": "rollup -w -c ./build/rollup.config.js",
37-
"prod": "rollup -c ./build/rollup.config.js --configProd",
37+
"prod": "NODE_ENV=production rollup -c ./build/rollup.config.js --configProd",
3838
"release": "bash ./build/release.sh",
3939
"lint": "eslint src/* build/*.js"
4040
},

src/router.js renamed to src/index.js

Lines changed: 20 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,22 @@
11
import VueRouter from 'vue-router'
2-
import IonRouterVue from './ion-router-vue.vue'
2+
import IonVueRouter from './ion-vue-router.vue'
33

4-
export default class Router extends VueRouter {
4+
let globalVue = null
5+
let globalVueRouter = null
6+
7+
if (typeof window !== 'undefined') {
8+
globalVue = window.Vue
9+
globalVueRouter = window.VueRouter
10+
} else if (typeof global !== 'undefined') {
11+
globalVue = global.Vue
12+
globalVueRouter = global.VueRouter
13+
}
14+
15+
if (!globalVueRouter) {
16+
globalVueRouter = VueRouter
17+
}
18+
19+
export default class Router extends globalVueRouter {
520
constructor(...args) {
621
super(...args)
722
this.direction = args.direction || 1
@@ -58,17 +73,12 @@ export default class Router extends VueRouter {
5873
Router.install = function(Vue) {
5974
if (Router.install.installed) return
6075
Router.install.installed = true
61-
VueRouter.install(Vue)
62-
Vue.component('IonRouterVue', IonRouterVue)
76+
77+
globalVueRouter.install(Vue)
78+
Vue.component('IonVueRouter', IonVueRouter)
6379
}
6480

6581
// Auto-install when Vue is found (i.e. in browser via <script> tag)
66-
let globalVue = null
67-
if (typeof window !== 'undefined') {
68-
globalVue = window.Vue
69-
} else if (typeof global !== 'undefined') {
70-
globalVue = global.Vue
71-
}
7282
if (globalVue) {
7383
globalVue.use(Router)
7484
}

src/ion-router-vue.vue renamed to src/ion-vue-router.vue

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121

2222
<script>
2323
export default {
24-
name: 'IonRouterVue',
24+
name: 'IonVueRouter',
2525
props: {
2626
name: {
2727
type: String,
@@ -85,9 +85,9 @@ export default {
8585
this.leavingEl = el
8686
},
8787
leave(el, done) {
88-
this.transition(this.enteringEl, el)
89-
.finally(() => done())
90-
.catch(err => console.error(err))
88+
const promise = this.transition(this.enteringEl, el)
89+
if (!promise) return
90+
promise.finally(() => done()).catch(err => console.error(err))
9191
},
9292
enter(el, done) {
9393
done()

0 commit comments

Comments
 (0)