Using a product tour library with VueJS - javascript

I'm trying to setup a feature intro tutorial for my web app (like intro.js). I'm having trouble with intro.js with nothing happening (no error message or tour messages). I tried setting up the data attributes that intro.js uses and calling the tour start from the mounted function on App.vue, but no luck. I'm looking to see if anyone has experience with with libraries like this combined with VueJS.
Code from App.vue:
mounted: function() {
const introJS = require('intro.js')
introJS.introJs().start()
}
Inside of the same component in it's <template>:
<div class="card card-accent-info" v-if="!isLoading" data-intro="Test step here" data-step="1">
I also have the css loaded in App.vue:
#import "~intro.js/minified/introjs.min.css";

The problem might be the way you're importing the CSS from the <style> tag. To get the styles to apply properly, import the CSS in JavaScript:
<!-- MyComponent.vue -->
<script>
import "intro.js/minified/introjs.min.css";
export default {
mounted() {
const introJS = require("intro.js");
introJS.introJs().start();
}
};
</script>
demo

Related

Can not set Cytoscapejs container element in next js

Im working on a Next.js project that requires the use of cytoscapejs. So far I have tried to type document.getElementById('cy') and $('#cy') but none of those work.
import Head from "next/head"
import cytoscape from 'cytoscape';
var cy = cytoscape({
//container: !!??!!
elements: [],
style: [],
layout: {}
});
export default function Grafo1() {
return (
<div>
<Head>
<title>Graph 1.</title>
</Head>
<div id="cy">
//graph here
</div>
</div>
)
}
I have tried a react library called react-cytoscape but thows an error "window is not defined" when I refresh the page becouse nextjs works with ssr and the graph component falls apart when refreshed. Also tried the dynamic module that deactivates ssr but still doesn`t work.
I`d style this somewhere else. Any ideas?

Adding or Injecting HTML or Component into Vue component generated at runtime

I have a Vue app where I take a bunch of markdown files and make them into Components that get dynamically generated and the links of which get handled by Vue Router. I'm loading my markdown using this Vue markdown loader.
The main route file looks like this:
import RamblePosts from "#/assets/rambles/rambles.json"; // Simple JSON that contains the name of the markdown documents
...RamblePosts.map(entry => ({
path: `/${entry}`,
name: entry,
component: () => import(`#/assets/rambles/${entry}.md`)
}))
];
As you can see, I'm generating components based off the markdown files I have in that directory.
Example usage would be:
<template>
<div class="wrapper-div rambling-wrapper">
<div class="ramble-cards-wrapper">
<RambleCard
v-for="route in rambleList"
:key="route.title"
:title="route.title"
:subtitle="route.subtitle"
:ramble-url="route.url"
/>
</div>
</div>
</template>
<script>
import RambleCard from "#/components/RambleCard";
import rambleList from "#/assets/rambles/rambleList.json";
export default {
components: {
RambleCard
},
data() {
return {
rambleList
};
}
};
</script>
This is a simple card element that just displays the name of the markdown entry, a subtitle and the vue-router link for it. Clicking on the link will take you to the relevant article, so something like url.com/foo
Is there a way for me to somehow edit or manipulate these markdown components and add, say, a Vue component to them or even just plain HTML? Since they're generated dynamically at, I'm not sure how to approach the situation because I can't just plug in a Component in the middle of those article components somewhere.

My custom vue directive in a .vue file is not executing

I created a Vue custom directive for the first time. But the directive is not initialized. I tried a new project and the codepen too. I really don't know the problem!
This is my Vue component:
<template>
<div id="app">
<div my-test>Some text...</div>
</div>
</template>
<script>
export default {
name: "App",
directives: {
"my-test": function(el) {
el.style.backgroundColor = "red";
console.log("This is my first directive!");
}
}
};
</script>
The sandbox:
https://codesandbox.io/s/angry-khorana-uuhd0?file=/src/App.vue
Thanks
To ensure compliance with naming standards (have a - dash in the name) and to avoid conflicts, by default, all directives registered by Vue are automatically prefixed with v-.
So change the markup to <div v-my-test>...</div>. See it working.

Jquery and Vue, .html() is not working

I have been playing with the Vue tutorial Here and I have added a simple Jquery .html function. However it is not working. I have added the jQuery plugin, and there are no errors in the console. I have my "App" component defined like this:
<template>
<div id="app">
<div id="mainMenu"> Hello </div>
</div>
</template>
<script>
import * as start from './assets/scripts/start.js'
export default {
name: 'app',
created: start.loadMainNavigation()
}
</script>
and my loadMainNavigation function like this:
function loadMainNavigation() {
$('#mainMenu').html("ASERFDASRF");
console.log("In load Nav");
}
I can see the "In load Nav" in the console. No errors, but the DIV still has the original "Hello" - What am I doing wrong?
The reason the content doesn't change is that, at the time you are executing your function, the component has not yet been rendered to the DOM. The DOM is not rendered until the mounted event.
Beyond that, however, you need to be careful when you are integrating jQuery and Vue, or avoid it altogether. The idiomatic Vue way to do this would be something like this.
console.clear()
new Vue({
el: "#app",
data:{
message: "Hello"
},
created(){
this.message = "ASERFDASRF"
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script>
<div id="app">
<div id="mainMenu"> {{message}} </div>
</div>
There are a few times when you might mix jQuery and Vue (when you want to use a jQuery plugin for which there is no Vue counterpart, for example) but typically, there is almost always a way to do what you want without jQuery.

How to make it work: Dragula drag-and-drop on Meteor

I've been trying to add a drag-and-drop functionality into my Meteor app using the Dragula library. It seems very simple and easy to use. However, even though I have followed the instructions and looked other examples from the web, I haven't been able to get it work. It doesn't generate any actual errors, but the <div> elements that I want to move just can't be moved.
JS:
import { Template } from 'meteor/templating';
import './body.html';
if (Meteor.isClient) {
Meteor.startup( function() {
Session.set("view", "titleScreen");
});
Template.body.helpers({
template_name: function () {
return Session.get("view");
}
});
//click event to change view from title screen to main screen
Template.body.events({
'click .changeScreen': function (e) {
e.preventDefault();
Session.set("view", "mainScreen");
var selectedView = Session.get('view');
console.log(selectedView);
}
});
//drag and drop the contents of divs 'move1' and 'goal1'?
Template.body.onRendered(function() {
dragula([document.getElementById('move1'), document.getElementById('goal1')]);
});
}
HTML:
<body>
{{> Template.dynamic template=template_name}}
</body>
<template name="plcHolder">
{{view}}
{{#if view "title"}}
{{> titleScreen}}
{{else}}
{{> mainScreen}}
{{/if}}
</template>
<template name="titleScreen">
<!--here would be the contents of the title screen, like some text and a button-->
</template>
<template name="mainScreen">
<div class="container">
<div id="goal1" class="goalBoxBG">
<div class="goalBox"></div></div>
<!--...-->
<div id="move1" class="moveBoxBGL">
<div class="moveBox"></div></div>
<!--...-->
</div>
</template>
This is my first Meteor app, so I decided to use the same structure used by Meteor's tutorial, i.e. the JS and HTML files referenced above are placed in ../imports/ui/ and imported from there. I installed Dragula with npm and the dragula.js file is located in \node_modules\dragula.
EDIT: I was able to make it work by moving the code to the end of the HTML file, so the main reason must've been with the order in which the code is executed. It seems that onRendered() fires after the page has initially loaded and doesn't take account the templates, which are changed by JavaScript.
The import statement shouldn't reference the node modules directory. See
https://guide.meteor.com/using-npm-packages.html#client-npm for details, basically you should just write
import dragula from 'dragula';
And the packaging system will work out where to find it for you.
There is/was a package on Atmosphere:
https://atmospherejs.com/ahref/dragula
Which does the work of importing for you, but the author recommends using npm as the way forward.

Categories