Skip to content

Commit 73cff0c

Browse files
Modus Createmhartington
Modus Create
authored and
mhartington
committed
feat(): initial vue support
1 parent a9b3064 commit 73cff0c

36 files changed

+9914
-0
lines changed

‎README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ Ionic is based on [Web Components](https://www.webcomponents.org/introduction) a
1010

1111
- [Core](core/README.md)
1212
- [Ionic Angular](angular/README.md)
13+
- [Ionic Vue](vue/README.md)
1314

1415

1516
### Getting Started

‎vue/.babelrc

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"presets": ["env"]
3+
}

‎vue/.editorconfig

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
root = true
2+
[*]
3+
end_of_line = lf
4+
insert_final_newline = true
5+
trim_trailing_whitespace = true
6+
7+
[*.{js,vue}]
8+
charset = utf-8
9+
indent_style = space
10+
indent_size = 2
11+
continuation_indent_size = 6
12+

‎vue/.eslintrc.js

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
module.exports = {
2+
env: {
3+
browser: true,
4+
node: true,
5+
es6: true,
6+
},
7+
extends: [
8+
'prettier',
9+
'eslint:recommended',
10+
'plugin:vue/recommended',
11+
'plugin:jest/recommended',
12+
'plugin:promise/recommended',
13+
],
14+
plugins: ['prettier', 'promise', 'jest'],
15+
parserOptions: {
16+
sourceType: 'module',
17+
ecmaVersion: 2017,
18+
},
19+
rules: {
20+
'no-console': 0,
21+
'prettier/prettier': 'error',
22+
'linebreak-style': ['error', 'unix'],
23+
'promise/no-callback-in-promise': 0,
24+
indent: ['error', 2],
25+
semi: ['error', 'never'],
26+
quotes: ['error', 'single'],
27+
},
28+
}

‎vue/.gitignore

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
.*
2+
~*
3+
4+
dist/
5+
node_modules/
6+
7+
# ignore log files
8+
*.log
9+
npm-debug.log*
10+
yarn-debug.log*
11+
yarn-error.log*
12+
test-report.xml
13+
14+
!.gitignore
15+
!.editorconfig
16+
!.eslintrc.js
17+
!.prettierrc
18+
!.babelrc
19+
!.circleci

‎vue/.prettierrc

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"printWidth": 100,
3+
"singleQuote": true,
4+
"semi": false,
5+
"trailingComma": "es5"
6+
}

‎vue/README.md

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
# @ionic/vue
2+
3+
Ionic Vue.js specific building blocks on top of [@ionic/core](https://www.npmjs.com/package/@ionic/core) components.
4+
5+
6+
## Related
7+
8+
* [Ionic Core Components](https://www.npmjs.com/package/@ionic/core)
9+
* [Ionic Documentation](https://ionicframework.com/docs/)
10+
* [Ionic Worldwide Slack](http://ionicworldwide.herokuapp.com/)
11+
* [Ionic Forum](https://forum.ionicframework.com/)
12+
* [Ionicons](http://ionicons.com/)
13+
* [Stencil](https://stenciljs.com/)
14+
* [Stencil Worldwide Slack](https://stencil-worldwide.herokuapp.com/)
15+
* [Capacitor](https://capacitor.ionicframework.com/)
16+
17+
18+
## License
19+
20+
* [MIT](https://raw.githubusercontent.com/ionic-team/ionic/master/LICENSE)

‎vue/cookbook/custom-transitions.html

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Ionic v4 + Vue.js - Custom transitions</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+
<!-- Disable Ionic transitions -->
10+
<script>window.disableIonicTransitions = true</script>
11+
<script src="https://unpkg.com/vue"></script>
12+
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
13+
<script src="https://unpkg.com/@modus/ionic-vue@latest/dist/ionic-vue.js"></script>
14+
<script src="https://unpkg.com/@ionic/core@latest/dist/ionic.js"></script>
15+
<link rel="stylesheet" href="https://unpkg.com/@ionic/core@latest/css/ionic.bundle.css"/>
16+
<style>
17+
.fade-enter-active, .fade-leave-active {
18+
transition: opacity .3s ease;
19+
}
20+
.fade-enter, .fade-leave-to {
21+
opacity: 0;
22+
}
23+
</style>
24+
</head>
25+
26+
<body>
27+
<ion-app>
28+
<ion-vue-router></ion-vue-router>
29+
</ion-app>
30+
31+
<script>
32+
const Toolbar = Vue.component('Toolbar', {
33+
name: 'Toolbar',
34+
props: { title: String, backURL: String },
35+
template: `<ion-header>
36+
<ion-toolbar>
37+
<ion-buttons slot="start">
38+
<ion-back-button :default-href="backURL"/>
39+
</ion-buttons>
40+
<ion-title>{{ title }}</ion-title>
41+
</ion-toolbar>
42+
</ion-header>`
43+
})
44+
45+
const Home = {
46+
template: `<transition name="fade">
47+
<ion-page class="ion-page">
48+
<toolbar title="Home"/>
49+
<ion-content class="ion-content" padding>
50+
<router-link to="/page">Go to page</router-link>
51+
</ion-content>
52+
</ion-page>
53+
</transition>`
54+
}
55+
56+
const Page = {
57+
template: `<transition name="fade">
58+
<ion-page class="ion-page">
59+
<toolbar title="Page" backURL="/"/>
60+
<ion-content class="ion-content" padding>
61+
<ion-button @click="goHome">Go home</ion-button>
62+
</ion-content>
63+
</ion-page>
64+
</transition>`,
65+
methods: {
66+
goHome() {
67+
this.$router.back()
68+
}
69+
}
70+
}
71+
72+
Vue.config.ignoredElements.push(/^ion-/)
73+
74+
new Vue({
75+
router: new IonicVue.IonicVueRouter({
76+
routes: [
77+
{ path: '/', component: Home },
78+
{ path: '/page', component: Page },
79+
],
80+
}),
81+
}).$mount('ion-app')
82+
</script>
83+
</body>
84+
</html>

‎vue/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="https://unpkg.com/@modus/ionic-vue@latest/dist/ionic-vue.js"></script>
12+
<script src="https://unpkg.com/@ionic/core@latest/dist/ionic.js"></script>
13+
<link rel="stylesheet" href="https://unpkg.com/@ionic/core@latest/css/ionic.bundle.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 IonicVue.IonicVueRouter({
62+
routes: [
63+
{ path: '/', component: Home },
64+
{ path: '/page', component: Page },
65+
],
66+
}),
67+
}).$mount('ion-app')
68+
</script>
69+
</body>
70+
</html>

‎vue/cookbook/ionic-controllers.html

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Ionic v4 + Vue.js - Ionic Controllers</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="https://unpkg.com/@modus/ionic-vue@latest/dist/ionic-vue.js"></script>
12+
<script src="https://unpkg.com/@ionic/core@latest/dist/ionic.js"></script>
13+
<link rel="stylesheet" href="https://unpkg.com/@ionic/core@latest/css/ionic.bundle.css"/>
14+
</head>
15+
16+
<body>
17+
<ion-app>
18+
<ion-menu side="end">
19+
<ion-header>
20+
<ion-toolbar>
21+
<ion-title>Hola</ion-title>
22+
</ion-toolbar>
23+
</ion-header>
24+
25+
<ion-content padding>
26+
hola macho
27+
</ion-content>
28+
</ion-menu>
29+
30+
<ion-vue-router></ion-vue-router>
31+
</ion-app>
32+
33+
<script>
34+
const Toolbar = Vue.component('Toolbar', {
35+
name: 'Toolbar',
36+
props: { title: String, backURL: String },
37+
template: `<ion-header>
38+
<ion-toolbar>
39+
<ion-buttons slot="start">
40+
<ion-back-button :default-href="backURL"/>
41+
</ion-buttons>
42+
<ion-title>{{ title }}</ion-title>
43+
</ion-toolbar>
44+
</ion-header>`
45+
})
46+
47+
const Home = {
48+
template: `<ion-page class="ion-page" main>
49+
<toolbar title="Home"/>
50+
<ion-content class="ion-content" padding>
51+
<ion-button @click="alert">Trigger Alert</ion-button>
52+
<ion-button @click="loading">Trigger Loading</ion-button>
53+
<ion-button @click="menu">Toggle Menu</ion-button>
54+
<ion-button @click="modal">Open Modal</ion-button>
55+
<ion-button @click="popover">Open Popover</ion-button>
56+
<ion-button @click="toast">Trigger Toast</ion-button>
57+
</ion-content>
58+
</ion-page>`,
59+
methods: {
60+
alert() {
61+
this.$ionic.alertController.create({
62+
header: 'Hello!',
63+
message: 'How are you?',
64+
buttons: ['OK, thanks!'],
65+
})
66+
.then(a => a.present())
67+
},
68+
loading() {
69+
this.$ionic.loadingController.create()
70+
.then(l => {
71+
l.present()
72+
setTimeout(function() {
73+
l.dismiss()
74+
}, 1000)
75+
})
76+
},
77+
menu() {
78+
this.$ionic.menuController.toggle()
79+
},
80+
modal() {
81+
this.$ionic.modalController.create({
82+
component: {
83+
template: `<div>
84+
<ion-content padding>
85+
<h1>Howdy!</h1>
86+
</ion-content>
87+
</div>`,
88+
}
89+
})
90+
.then(m => m.present())
91+
},
92+
popover(event) {
93+
this.$ionic.popoverController.create({
94+
component: {
95+
template: `<ion-list>
96+
<ion-list-header>
97+
<ion-label>Ionic</ion-label>
98+
</ion-list-header>
99+
<ion-item>Learn Ionic</ion-item>
100+
<ion-item>Documentation</ion-item>
101+
<ion-item>Showcase</ion-item>
102+
<ion-item>GitHub Repo</ion-item>
103+
</ion-list>`,
104+
},
105+
translucent: true,
106+
event
107+
})
108+
.then(p => p.present())
109+
},
110+
toast() {
111+
this.$ionic.toastController.create({
112+
message: 'Here\'s to IonicVue!',
113+
showCloseButton: true,
114+
position: 'top',
115+
closeButtonText: 'Done'
116+
})
117+
.then(t => t.present())
118+
},
119+
}
120+
}
121+
122+
Vue.use(IonicVue.IonicAPI)
123+
124+
new Vue({
125+
router: new IonicVue.IonicVueRouter({
126+
routes: [
127+
{ path: '/', component: Home },
128+
],
129+
}),
130+
}).$mount('ion-app')
131+
</script>
132+
</body>
133+
</html>

0 commit comments

Comments
 (0)