I followed the official documentation to implement a Rive animation in Vue.js:
<template>
<div>
<canvas ref="canvas" width="80" height="80"></canvas>
</div>
</template>
<script>
import { Rive } from "#rive-app/webgl";
export default {
mounted() {
new Rive({
canvas: this.$refs.canvas,
src: "http://localhost:8081/test.riv",
autoplay: true,
});
},
};
</script>
This works just fine this way. When I try to replace the src parameter with a path to the .riv file in the assets folder the animation won't show. I already tried:
src: "../assets/test.riv",
src: "assets/test.riv",
src: "#/assets/test.riv",
src: require("../assets/test.riv"),
src: require("assets/test.riv"),
src: require("#/assets/test.riv"),
Your first try actually looks correct 🤔
Just realized, that this just worked due to browser caching 🙈
You can simply put all your .riv files into public/assets and reference them like assets/your-file.riv.
https://cli.vuejs.org/guide/html-and-static-assets.html#the-public-folder
Related
I am still very much at the start of a new project using nuxt3. I installed tailwindcss for quick themeing and prototyping. I followed the basic setup on the documentation for the tailwindcss plugin for nuxt 3.
The problem is, that the background color for the welcome message is not applied (the CSS property also does not show up on the rendered HTML). When I change the CSS to something like this: class="bg-green-200", then it works.
I could not find any similar issues, however I'm sure I can't be the first/only one stumbling over this. I appreciate any hints.
**Edit: ** The issue was the import syntax in the tailwind configuration file. Changing the import to the require syntax solved the issue.
My code is as follows:
nuxt.config.js
export default defineNuxtConfig({
modules: [
'#nuxtjs/robots',
'#nuxtjs/color-mode',
'#nuxtjs/tailwindcss',
'#nuxtjs/i18n',
],
i18n: {
locales: [
{
code: 'de', name: 'Deutsch', iso: 'en-US', file: 'de.js'
},
{
code: 'en', name: 'English', iso: 'de-CH', file: 'en.js'
},
],
defaultLocale: 'de',
strategy: 'prefix_except_default',
langDir: 'languages',
detectBrowserLanguage: {
useCookie: true,
cookieKey: 'i18n_redirected',
redirectOn: 'root', // recommended
},
},
buildModules: [],
robots: {},
tailwindcss: {
configPath: 'tailwind.config.js',
exposeConfig: false,
injectPosition: 0,
}
})
tailwind.config.js
import defaultTheme from 'tailwindcss/defaultTheme'
export default {
theme: {
extend: {
colors: {
primary: defaultTheme.colors.green
}
}
}
}
app.vue
<template>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</template>
layouts/default.vue
<template>
<div>
<LayoutHeader/>
<slot />
<LayoutFooter/>
</div>
</template>
pages/index.vue
<template>
<div>
<div class="bg-primary">Welcome to the homepage</div>
</div>
</template>
The main issue being that tailwind.config.css is not a valid configuration file because we're using JS here, hence why npx tailwindcss init is the recommended way to safely generate the configuration file (the config itself is a JS file, not a CSS one).
I have successfully installed it with the following tailwind.config.js file
const colors = require('tailwindcss/colors')
/** #type {import('tailwindcss').Config} */
module.exports = {
content: [
"./components/**/*.{js,vue,ts}",
"./layouts/**/*.vue",
"./pages/**/*.vue",
"./plugins/**/*.{js,ts}",
"./nuxt.config.{js,ts}",
],
theme: {
extend: {
colors: {
primary: colors.green
}
},
},
}
Here is a reference to the documentation: https://tailwindcss.com/docs/customizing-colors#naming-your-colors
Here is a working github repo.
I was looking for an idea of how to programmatically bind in video player urls. I understand the idea of using img and doing v-for and a :src, but the url for my videos get put in the data of the script. Is it possible to bind and make these programmatic as well? Here is an example of a working script now, but I just have to replace this as a component for every single video manually.
<template>
<div class="player">
<client-only>
<video-player
ref="videoPlayer"
:options="playerOptions"
/>
</client-only>
</div>
</template>
<script>
export default {
name: "index",
data() {
return {
playerOptions: {
sources: [{
type: 'application/x-mpegurl',
src: 'myvideo.m3u8'
}],
The above code is working, but I need to have a component for every single video. Then in each component put the same code, but change the name of the src for the m3u8 video. Ideally, I would want to just pass something from an api into the src of the m3u8 and create one dynamic component. The question is, how would I make this dynamic component?
I tried something like this, but couldnt do a :src in the script.
<template>
<div class="player">
<client-only>
<video-player
ref="videoPlayer"
:options="playerOptions"
/>
</client-only>
</div>
</template>
<script>
export default {
name: "index",
data() {
return {
playerOptions: {
sources: [{
type: 'application/x-mpegurl',
:src: video.url
}],
#tomdale I'm not sure if i'm understanding your question correctly, but if you want something dynamic you're probably best to remove playerOptions from your data() property and turn it into a computed property.
It could then look something like this,
computed: {
playerOptions() {
return {
sources: [{
type: 'application/x-mpegurl',
src: this.video.url
}]
}
},
}
Your question doesn't really show where you're getting the video and video.url data from, but if the component is working with a collection of video data, you could do something like,
playerOptions() {
let sources = []
let i = 0
while (i < this.videos.length) {
sources.push({
type: 'application/x-mpegurl',
src: this.videos[i].url
})
i++
}
return sources
},
You'll be be able to reference playerOptions the same way that you were in when it was in data(), ie this.playerOptions, however now it will be dynamic.
I am trying to use this library cryptocurrency-icons from Github inside my Nuxt SSR project
This library adds all the svg icons to ./node_modules/cryptocurrency-icons/svg/color directory
I made the following component in the components/BaseCryptoIcon.vue file
<template>
<Component
:is="
require(`~/node_modules/cryptocurrency-icons/svg/color/${name}.svg`)
.default
"
class="BaseIcon"
v-bind="$attrs"
#v-on="$listeners"
/>
</template>
<script>
/**
* https://stackoverflow.com/questions/59148672/how-to-import-multiple-svgs-in-vue-js-via-vue-svg-loader
*/
export default {
name: 'BaseIcon',
// Transparent wrapper component
// https://v2.vuejs.org/v2/guide/components-props.html#Disabling-Attribute-Inheritance
inheritAttrs: false,
props: {
name: {
type: String,
required: true,
},
},
}
</script>
<style>
.BaseIcon {
/* Add some default CSS declaration blocks */
width: 32px;
height: 32px;
}
</style>
When I try to use it in my pages/Index.vue file as following nothing is rendered. It is not giving any error either
<template lang="pug">
base-crypto-icon(name='btc')
</template>
<script lang="javascript">
import BaseCryptoIcon from '~/components/BaseCryptoIcon.vue'
export default {
components: {BaseCryptoIcon}
}
</script>
Can someone kindly tell me how I can make this work in Vue/Nuxt
You can try to make method in components/BaseCryptoIcon.vue:
getIcon(name) {
return require(`~/node_modules/cryptocurrency-icons/svg/color/${name}.svg`).default
}
then in template:
<Component
:is="getIcon(name)"
/>
Probably related question from 2 days ago:
Why image path is not resolved by require() when passed as prop in NuxtJS?
I tried to use vue2-editor. so when i tried with basic process which is in the documentation
import { VueEditor } from "vue2-editor";
export default {
components: {
VueEditor
},
<template>
<div id="app">
<vue-editor v-model="content"></vue-editor>
</div>
</template>
it gives me reference error document is not defined...
so then i tried to use it as plugin...in plugin, i defined
import Vue from "vue";
import { VueEditor } from "vue2-editor";
Vue.use(VueEditor);
and in nuxt.config.js
plugins: [
{ src: '~/plugins/vueditor', mode: 'client'},
]
now it doesnt show any error but editor doesnt show up.
i have also tried with { src: '~/plugins/vueditor', mode: 'client', ssr: false},
anyone who can help me with this.?
I try to include a bot developed with landbot.io in my nuxt web app (NUXT.js framework).
Below, there is the code that the landbot's guide provides me.
Code to include:
<script src="https://static.landbot.io/landbot-widget/landbot-widget-1.0.0.js"></script>
<div id="myLandbot" style="width: 100%; height: 500px"></div>
<script>
var myLandbot = new LandbotFrameWidget({
container: '#myLandbot',
index: 'https://landbot.io/u/..../index.html',
});
</script>
But i don't know what i should do with the second script tag because i always get this error:
"LandbotFrameWidget do not definied"
I include the first script tag in nuxt.config.js like that:
head: {
script: [
{ src: 'https://static.landbot.io/umicore/UmiAccessPoint.js' },
{ src: 'https://static.landbot.io/landbot-widget/landbot-widget-1.0.0.js' }
]
}
Your nuxt.config.js config is correct, but the first script src is not needed.
I've created a working example in this codesandbox, take a look at the code used in the index.vue file:
<template>
<section>
<div>
<div id="myLandbot" style="width: 100vw; height: 100vh"></div>
</div>
</section>
</template>
<script>
export default {
mounted() {
var myLandbot = new LandbotFrameWidget({
container: "#myLandbot",
index: "https://landbot.io/u/H-117144-ZGUSSI5IM2OI5NYH/index.html"
});
}
};
</script>
Hope it helps!