https://github.com/hunterliu1003/vue-use-template

Control Vue Component programmatically by using a useTemplate composable
https://github.com/hunterliu1003/vue-use-template

composable nuxt3 usetemplate vue vue3

Last synced: 12 days ago
JSON representation

Control Vue Component programmatically by using a useTemplate composable

• Host: GitHub
• URL: https://github.com/hunterliu1003/vue-use-template
• Owner: hunterliu1003
• Created: 2024-02-14T16:31:08.000Z (9 months ago)
• Default Branch: master
• Last Pushed: 2024-10-13T19:08:40.000Z (26 days ago)
• Last Synced: 2024-10-13T19:09:01.396Z (26 days ago)
• Topics: composable, nuxt3, usetemplate, vue, vue3
• Language: TypeScript
• Homepage:
• Size: 702 KB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

README

        
# vue-use-template

## Playground

- [Stackblitz for Vue 3](https://stackblitz.com/github/hunterliu1003/vue-use-template/tree/master/examples/vue3)

- [Stackblitz for Nuxt 3](https://stackblitz.com/github/hunterliu1003/vue-use-template/tree/master/examples/nuxt3)

## App.vue

```vue

import { TemplateProvider, useTemplate } from 'vue-use-template'

// Support Ref, Reactive, Computed

const props = reactive({

  title: 'Hello World!'

})

const { show, hide } = useTemplate({

  component: defineAsyncComponent(() => import('./DialogConfirm.vue')),

  props,

  emits: {

    onConfirm: () => {

      alert('Confirm!')

      hide()

    },

    onCancel: () => hide(),

  },

  slots: {

    default: defineTemplate({

      component: () => h('p', 'This is a dialog content.'),

    }),

  },

})

  

    
App

    

    

    

    

  


```

## DialogConfirm.vue

```vue

defineProps<{

  title: string

}>()

const emit = defineEmits<{

  (e: 'confirm'): void

  (e: 'cancel'): void

}>()

  

    
{{ title }}

    

    

      Confirm

    

    

      Cancel

    

  


```