@happytiptoe/ziggy-vue

ziggy-vue

Type-safe plugin for ziggy-js and vue

Installation

Install with your favourite package manager:

# yarn
yarn add ziggy-vue

# pnpm
pnpm add ziggy-vue

# npm
npm install ziggy-vue

Import as required:

// main.ts
import { createApp } from 'vue'
import { plugin as ZiggyVue } from 'ziggy-vue'
import App from './App.vue'

// create Vue app
const app = createApp(App)

// use ziggy-vue plugin
app.use(ZiggyVue)

Use in components:

<!-- script setup -->
<script setup lang="ts">
import { useRoute } from 'ziggy-vue'

const $route = useRoute()
const homeRoute = $route('home')
</script>

<!-- composition api -->
<script setup lang="ts">
import { defineComponent } from 'vue'
import { useRoute } from 'ziggy-vue'

export default defineComponent({
  setup() {
    const $route = useRoute()
    const homeRoute = $route('home')

    return { homeRoute }
  }
})
</script>

<!-- options api -->
<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  methods: {
    getRoute(name: string) {
      return this.$route(name)
    }
  },
  computed: {
    router() {
      return this.$route()
    }
  }
})
</script>

<!-- template -->
<template>
  <Link :href="$route('dashboard')">...</Link>
</template>

Credits

• Ziggy - For their existing Vue integration.
• @types/ziggy-js - For providing types to ziggy-js.

License

MIT