I'm new to VueJS and trying to setup a simple page and embed a script to play HLS video using JW Player the script provided by JW Player dashboard <script src="https://cdn.jwplayer.com/players/4oE5ZjIY-MoGLPkuA.js"></script>
What would be the proper way to embed that script into .vue file
Knowing .vue files should have template, script and style elements and my understanding is it has to go inside script as a part of data but I'm quite confused on how I would do that and call it inside the template to view it in the browser??
Any help would be appreciated
As you've discovered, <script> tags cannot be embedded in Vue.js. However, <iframe> is a valid tag. The JW Platform allows for you to embed videos via a script tag OR an iframe tag.
Change this:
<script src="https://cdn.jwplayer.com/players/4oE5ZjIY-MoGLPkuA.js"></script>
Into this:
<iframe src="https://cdn.jwplayer.com/players/4oE5ZjIY-MoGLPkuA.html"></iframe>
Notice that the .js changes into .html and script changes into iframe
You may need to customize the iframe to fit your usage properly, some reference docs for how to do that can be found here.
Related
I'm using quasar and vue3 to build an SSR app
In chrome developer mode when I visualize the generated HTML, I have some Vue components not compiled to raw HTML like:
<body class="desktop body--light" data-server-rendered>
<div v-for="deal in clientssList" :key="client.Id">
<CLientItemSmDown :ClientModel="deal"></CLientItemSmDown>
</div>
is this normal, isn't SSR supposed to return raw HTML so bots can read it?
Saw this question last time already (can't find it back).
But no, CLientItemSmDown is a valid web-component and don't need to be transformed into a built-in HTML tag like input, div etc...
There is maybe an option to convert it down the road to some HTML, but I don't think that it's necessary and it may not be easily done if it's not supported by default.
That page may be quite interesting regarding Vue + Web-components.
You may raise a Github issue or join their Discord.
The TLDR being that it's fine to let it as is IMO.
I need to be able to add a js file to be able to manipulate the html? I tried to add something similar to what is done in the assets.yml by loading the styles.css, but I did not have the expected result, and I do not understand how else I could do it.
There is a new Quick Start Guide in a JavaScript tutorial that has the exact example you are asking for:
https://doc.oroinc.com/frontend/javascript/js-quick-start/
You can do JavaScript coding inline, I would suggest making a separate file for it though, just like you do with a .css file. A .js file is called with a <script> tag instead of <link> in your HTML document.
How to do it
Make a new file called main.js inside your folder
Call it with the <script> tag in your HTML document, usually just before the closing </body> tag.
Make an element and manipulate it - this example is the p element that has the ID #change. One way to do it is with document.querySelector. You can do it with a classname as well if you prefer.
I'll let you do the rest.
document.querySelector('#change').innerHTML =
<p id="change">Change me</p>
<script src="main.js"></script>
Title says it all. I'm developing a Vue app that is going to be used as a display for my instance of Home Assistant. I tell it what JS file to load and what tag to use and HA puts it inside an iframe. The font I'm using is an otf file.
It seems like my component can only use the font when it gets included in the page's section. Since I'm not generating the page or the iframe, I can't add anything to the head. The only thing I can figure out to do is use JS to add the font face to the head after the page is loaded. I've seen a react component do this. Is there a build option or something?
But it is my understanding the whole point of web components is to be able to include a single JS file then use the component. Does this not include fonts or other resources?
emotion is a css-in-js library. I saw it created <style> tag in the html head to provide styles.
Is it possible to use emotion to generate separate css files? So that we can move them to CDN and make the app loading faster.
according to Docs, you can't do it.
The way I used to generate an external stylesheet was to load my pages with SSR, and take the css generated by extractCritical, then write it to a file by using fs within style tag.
Hi I am new to elm and would like to know if it would be possible to set up elm such that it manages only one section of a website. the rest of the site would be in plain javascript, html, css.
but i would like to load up the compiled elm app in a separate script tag and it should manage only a particular section
let us say that the website is divided into 10 divs vertically of height 300px. i would want only the 3rd div to be an elm app.
is such a thing possible? if so how can i get this working
You can use Html packages embed function for this. I once did this just to try it out, but unfortunately cannot recall any details of it. I did found some source code though.
The html page would be something like this
<html>
<head>
</head>
<body>
<div id="personnel"></div>
</body>
<script src="elm.js"></script>
<script>
Elm.Person.embed(document.getElementById('personnel'));
</script>
</html>
By including elm.js, you'll get the Elm runtime. Here Person is my compiled Elm module. Something like
module Person exposing (..)
-- Module details here...
main =
Html.beginnerProgram { model = init, view = view, update = update }
Elm code is compiled to JavaScript with command
elm-make Person.elm --output elm.js
My knowledge on this is quite limited, but I did investigate it enough to be certain that with by doing this, one can add multiple components made with Elm to an html page / existing application.
Addendum: I found the source of my information
In addition to previous answer perhps you would like to take a look on:
https://ellie-app.com/h7vqHrPdWa1/0