I want to include a js widget in my vue application.
After trying a lot of random solutions, I came up with "my own", that is just importing it outside of vue, in the html head, then moving it with vue dom bindings to where I want it to be.
The problem is, I don't know if that is what I should be doing, in html I would just put the script tag where I want the external component to be and it would work fine.
The standard way is indeed to create a custom Vue component.
<template>
<div></div>
</template>
<script>
import Widget from 'widget.js'
export default {
name: 'my-widget',
mounted(){
// assume that the widget is a constructor
// that requires an element to be bound to
new Widget(this.$el)
}
}
</script>
And then you can import this component in another one and use it like <my-widget></my-widget>
Related
So i recently migrated from react to Next.Js, I am facing these issues and want to know if these have a solution :
Unlike react next can't just change a specific part of webpage and keep static part like navbar same throughout all my pages, I have to specifically add my Navbar component to all pages
The {styles.example} way of using css seems like a lot of work, I saw a lot of people using to do css within the js file, but it becomes a mess when I try to make it responsive. Is there any way i can use css just as normal like import it in js file, and use classname='example' in example.module.css
use _app
https://nextjs.org/docs/advanced-features/custom-app
import css in _app is global
https://nextjs.org/docs/basic-features/built-in-css-support
css extended
head(html way, won't apply loaders,make sure resource placed as refered): https://nextjs.org/docs/api-reference/next/head
import css (_app just like head but go webpack, named if not _app): https://nextjs.org/docs/basic-features/built-in-css-support
styled-jsx (inline,scoped by default, set global via prop): https://github.com/vercel/styled-jsx
element-style-prop: the react way
example cases
head in _app: compiled global css like bootstrap reset...
import css in _app: global custom css
head in component: compiled css for component, like date picker
import css in component: named fassion
styled-jsx: css fassion, scoped by default, global if global prop set
element-style: react fassion, element level
I am currently writing documentation for a Vue Component library, utilizing VuePress.
Using VuePress' markdown I am able to display code with <<< ./path/to/file.vue for example.
This is nice because VuePress uses prism.js for displaying code and has a custom prism language for Vue syntax highlights (analyzing the html shows that a language-vue class is applied to the codeblock).
No I am using a Vue component that Build to dynamically display some code snippets based on component props.
Inside my component, I am using the following pre/code syntax.
<pre class="language-vue">
<code ref="codesnippet">
{{codeOutput}}
</code>
</pre>
This displays a code box, but doesn't apply the language-vue CSS theme to it that VuePress uses in its code blocks. Is it possible to add this to my own component somehow, as prism.js is installed by VuePress.
In my current project I am working with a self-developed module system, where the individual modules should also have the possibility to extend e.g.the navbar by simply writing some HTML inside a <navbar:extend> tag.
It would be cool if there was a way to get it done with as little writing as the <svelte:head> tag.
What about creating a store to which you will write (update with) your HTML extensions from your Components and at the same time subscribe to that store within your NavComponent then within NavComponets append the new HTML using {#html variable}
like that you can append HTML from different components to your Navbar, this should achieve the functionality you desire.
here is a quick example of the implementation
Child1.svelte and Child2.svelte are two random components which are going to update you navbar.
Store.svelte is the file where you will create your global store to share HTML.
Nav.svelte is the navbar you want to populate with HTML from other components
try writing some HTML within Child1 and Child2 input fields then submit it, it will be rendered within the NavComponent
I'm trying to incorporate the p5js javascript library into my Ember.js app. I want the following p5js example to appear on the template:
https://p5js.org/examples/sound-record-save-audio.html
I've included the cdn script in my index.html file:
I dont know how/where in the Ember run loop to put the javascript so it runs and loads when the page loads
I would suggest making a component, putting the component in whatever template you're rendering (could be application.hbs if you only have one page) and putting the Javascript into the component's didInsertElement method.
Along with that, I would place the p5 canvas inside your component's own Element, so that the component behaves normally (it's weird for a component to render things outside its own Element, and you'd want them to be cleaned up properly if you navigate away to some other template). The p5 docs say how to position the canvas.
In your component it would look like:
export default Component.extend({
didInsertElement() {
createCanvas(400,400);
canvas.parent(this.element);
background(200);
fill(0);
text('Enable mic and click the mouse to begin recording', 20, 20);
...etc...
}
})
```
This answer applies for Ember app versions 1.13 onward and was written as of 3.x. Versions of Ember < 3.x will need to use the older import syntax in the component boilerplate.
The most common place for code that should run after a page loads is the didInsertElement hook:
import Component from '#ember/component';
export default Component.extend({
didInsertElement() {
this._super(...arguments);
console.log(p5) // this should print a function to the console
}
});
Also check out didRender, which might be a better fit for your use case.
You can read more about the uses of different component lifecycle hooks in The Guides
I am using Webpack with Vue.js to create a large-scale web app. The problem I encounter is the following:
I've am using vue-router and the following structure for the main app template:
<customNav></customNav>
<router-view></router-view>
The navigation is a single file component that has its own styles defined inside the component file. Let's say it has a black background by default. Now, on single occasions (when showing different views through the router), I want it to be transparent.
I thought I might just overwrite the CSS in the router view component, but this doesn't work because Webpack is bundling all the CSS of components I import, and I have to import all the components in the main.js to define them in the router. Therefore, overwriting the style in a component leads to it being the global default, even if the component is not even used.
How would I solve this problem?
You can take help of dynamic styling of VueJS. You can assign a class, based on the value of a variable. So in your customNav You can have two classes: say black-bg and transp-bg and you can change this will help of a variable: blackBackground
<YourElem v-bind:class="{ 'black-bg': blackBackground, 'transp-bg'!blackBackground}"></YourElem>
I think you can change this variable in two ways:
Have this as an instance data and change it based on current route.
Have this in vuex state and change in different components based on your requirement.