ionic-framework/packages/vue/CHANGELOG.md

Ionic Vue

This file contains the changelog for the Ionic Vue beta. For the latest changes, see our main changelog file.

0.5.2

Bug Fixes

• vue: add missing tabs attribute to router outlet inside ion-tabs (#22226) (ba4f07e)

Upgrade Steps

npm i @ionic/vue@0.5.2 @ionic/vue-router@0.5.2

New to Ionic Vue?

Check out our Quickstart Guide to get up and running. Then be sure to check out our Building Your First App Guide to learn how build a cross platform Ionic Vue application from start to finish!

0.5.1

Bug Fixes

• vue: correctly handle platform specific icons (#22200) (25d3ea6), closes #19078
• vue: correctly update property values (#22218) (2527189), closes #22079
• vue: ion-nav now handles Vue components properly (#22197) (2c6259c), closes #22184
• vue: pass props to component when using modal and popover controller (#22198) (e84f804), closes #22189

Upgrade Steps

npm i @ionic/vue@0.5.1 @ionic/vue-router@0.5.1

New to Ionic Vue?

Check out our Quickstart Guide to get up and running. Then be sure to check out our Building Your First App Guide to learn how build a cross platform Ionic Vue application from start to finish!

0.5.0

Bug Fixes

• vue: correctly render child pages in tabs (#22141) (7e449a1)
• vue: overlays function properly when used via controller or template (#22155) (fe5fadf), closes #22090
• vue: pushing a non-tabs page inside of tabs no longer renders it inside of the tabs outlet (#22112) (6ac6810), closes #22066

Features

• vue: add keyboard hook (#22145) (b76bfa3)

Performance Improvements

• vue: improved tree-shaking (#22131) (f82bac1)

Upgrade Steps

npm i @ionic/vue@0.5.0 @ionic/vue-router@0.5.0

With the release of @ionic/vue@0.5.0, developers can now use overlay components in their templates:

<template>
  <ion-page>
    <ion-content>
      <ion-button @click="setModalOpen">Open Modal</ion-button>
      
      <ion-modal
        css-class="my-modal-class"
        :is-open="isModalOpen"
        @onDidDismiss="setModalClosed"
      >
        <h1>Modal Content</h1>
      </ion-modal>
    </ion-content>
  </ion-page>
</template>

<script lang="ts">
import { 
  IonButton, 
  IonContent, 
  IonModal, 
  IonPage
} from '@ionic/vue';
import { defineComponent, ref } from 'vue';

export default defineComponent({
  name: 'Home',
  components: {
    IonButton, 
    IonContent, 
    IonModal, 
    IonPage
  },
  setup() {
    const isModalOpen = ref(false);
    const setModalOpen = () => isModalOpen.value = true;
    const setModalClosed = () => isModalOpen.value = false;
    
    return {
      isModalOpen,
      setModalOpen,
      setModalClosed
    }
  }
})
</script>

0.4.0

Bug Fixes

• vue: canGoBack now returns correct result with initial load redirect (#22071) (8227844)
• vue: ensure dynamic classes are synced with internal Ionic component classes (#22096) (9cb22be), closes #22051
• vue: using refs with v-model now works properly (#22092) (67fbb3b), closes #22076

Features

• vue: add hardware back button hook (#22069) (a7f564b)
• vue: add hook to access Ionic Vue router (#22072) (3d34b68)
• vue: add webHashHistory and memoryHistory options for router (#22101) (fe2cf22)

Upgrade Steps

npm i @ionic/vue@0.4.0 @ionic/vue-router@0.4.0

0.3.1

• Vue 3 support

Enjoy! 🎉