revuelution
Animated UI components for Vue.js based on gsap.
Documentation
The documentation is in the docs directory, it serves as the demo as well.
Browse online documentation here.
Quick start
You need [Vue.js] version 3+ or Nuxt 3.
1 Install via npm
npm install revuelution --save
2 Import and use Revuelution
Bundle
import { createApp } from "vue";
import App from "./App.vue";
import Revuelution from "revuelution";
import "revuelution/styles.css";
const app = createApp(App);
app.use(Revuelution);
app.mount("#app");
or Individual Components
<script setup>
import { RUnderline } from "revuelution";
import { RSlideIn } from "revuelution";
</script>
<template>
<r-slide-in>
<r-underline>Hello World!</r-underline>
</r-slide-in>
</template>
SSR
If you are using Nuxt 3, you need to take some additional steps.
1 Install @css-render/vue3-ssr package
npm install @css-render/vue3-ssr --save
2 Add Revuelution plugin
In your /plugins folder create a file revuelution.plugin.js.
Paste this Nuxt Plugin configuration into the file you just created:
import { setup } from "@css-render/vue3-ssr";
import { defineNuxtPlugin } from "#app";
export default defineNuxtPlugin((nuxtApp) => {
if (process.server) {
const { collect } = setup(nuxtApp.vueApp);
const originalRenderMeta = nuxtApp.ssrContext?.renderMeta;
nuxtApp.ssrContext = nuxtApp.ssrContext || {};
nuxtApp.ssrContext.renderMeta = () => {
if (!originalRenderMeta) {
return {
headTags: collect(),
};
}
const originalMeta = originalRenderMeta();
if ("then" in originalMeta) {
return originalMeta.then((resolvedOriginalMeta) => {
return {
...resolvedOriginalMeta,
headTags: resolvedOriginalMeta["headTags"] + collect(),
};
});
} else {
return {
...originalMeta,
headTags: originalMeta["headTags"] + collect(),
};
}
};
}
});
3 Add styling
In your nuxt.config.js or nux.config.ts add the following line:
export default defineNuxtConfig({
...
css: ["revuelution/styles.css"],
...
});
Now you should be good to go!
Current status
Right now Revuelution is just a side project that is meant to test some things out. Future developments and maintenance are unknown.