Vue SDK

The Casdoor Vue SDK works with Vue 2 and Vue 3 and wraps casdoor-js-sdk for easier integration. For more control, use the JS SDK directly.

nota

This plugin is still in development. Questions or suggestions: open an issue.

Full example (Vue frontend + Python backend): casdoor-python-vue-sdk-example.

Instalación

# NPM
npm install casdoor-vue-sdk

# Yarn
yarn add casdoor-vue-sdk

Initialization

Provide these parameters (all strings):

Parameter	Requerido	Descripción
serverUrl	Sí	Casdoor server URL.
clientId	Sí	Application client ID.
appName	Sí	Application name.
organizationName	Yes	Organization name.
redirectPath	No	Callback path; default /callback.

Vue 3:

// main.js
import Casdoor from 'casdoor-vue-sdk'

const config = {
  serverUrl: "http://localhost:8000",
  clientId: "4262bea2b293539fe45e",
  organizationName: "casbin",
  appName: "app-casnode",
  redirectPath: "/callback",
};

const app = createApp(App)
app.use(Casdoor, config)

Vue 2:

// main.js
import Casdoor from 'casdoor-vue-sdk'
import VueCompositionAPI from '@vue/composition-api'

const config = {
  serverUrl: "http://localhost:8000",
  clientId: "4262bea2b293539fe45e",
  organizationName: "casbin",
  appName: "app-casnode",
  redirectPath: "/callback",
};

Vue.use(VueCompositionAPI)
Vue.use(Casdoor, config)

new Vue({
  render: h => h(App),
}).$mount('#app')

Usage example

<script>
export default {
  name: 'App',
  methods: {
    login() {
      window.location.href = this.getSigninUrl();
    },
    signup() {
      window.location.href = this.getSignupUrl();
    }
  }
}
</script>

Redirect / Vue version issues

If the postinstall hook did not run or you changed the Vue version, fix redirect behavior with:

npx vue-demi-fix

See vue-demi for switching between Vue 2 and Vue 3.