Examples for Vue.js

[aorumbayev]

Awesome work on the project!

Just wondering if you are planning to add any examples on using this with Vue based projects?

[jjranalli]

Glad you like Nightwind! I'd love to add it but unfortunately I have limited knowledge of Vue.

If anyone wants to contribute with this or other examples, feel free to open a pull request!

[xxSkyy]

Hey, thanks for amazing time saver, I'm testing app right now on vue3+ts and so far works well! It's quite same way as on react

Example with almost any variant of Vue syntax despite Vue2+Typescript because I almost didn't use it: (Composition API are new way of writing components in vue introduced in Vue3 but also it's possible to include it in vue2, Option api are "legacy" method)

/// TEMPLATE

// Pug
<template lang="pug">
#app(:v-html="nightwind.init()")
  button(@click="nightwind.toggle()") Toggle
</template>

//Html
<template>
<div id="app" :v-html="nightwind.init()">
  <button @click="nightwind.toggle()">Toggle</button>
</div>
</template>

/// Vue3+Typescript Composition API

// With typescript
<script lang="ts">
import { defineComponent } from "vue";
// Use ts ignore for now in typescript as no types support
// @ts-ignore
import nightwind from "nightwind/helper"

export default defineComponent({
  setup() {
    return {
      nightwind
    }
  }
})
</script>

/// Vue3+Typescript with setup tag (experimental)
<script lang="ts" setup>
import nightwind from "nightwind/helper"
</script>

/// Vue3 Composition API  (or Vue2 with Composition API plugin)
<script>
import nightwind from "nightwind/helper"

export default {
  setup() {
    return {
      nightwind
    }
  }
}
</script>

/// Vue2/Vue3 Options API
<script>
import nightwind from "nightwind/helper"

export default {
  data() {
    return {
      nightwind
    }
  }
}
</script>

[jjranalli]

Thanks @xxSkyy! Would you like to open a PR to add your example to the readme in the examples section?

[xxSkyy]

Done

[laurensiusadi]

That doesn't work that well in Vue 2. This is what I found working:

<script>
import nightwind from 'nightwind/helper'

export default {
  name: 'App',
  mounted() {
    nightwind.init()
    nightwind.toggle()
  }
}

[FinalDoom]

For anyone struggling with typescript and vue, throw

eval(transpile(nightwind.init()));

in your setup() or beforeMount() or whatever. Don't bother with v-html.

Feels dirty though. Hopefully this ends up publishing something typescript-compatible eventually.

[WhaleFell]

Add declaration file to vite-env.d.ts:

/// <reference types="vite/client" />

declare module 'nightwind/helper'{
    export function init(): void
    export function toggle(): void
}

It can solve type error.

[CommanderStorm]

FYI (regarting the ts-typing issue): @types/nightwind is now avaliable. You can install it via

npm install --save-dev @types/nightwind