I am trying to render a simple HTML page in Nuxt,
I tried
layouts/empty.vue
<template>
<nuxt />
</template>
<script>
export default {
components: {},
};
</script>
and page
pages/simple.vue
<template>
<div>Redirecting to <a :href="dynamicUrl">{{dynamicUrl}}</a>.</div>
</template>
<script>
export default {
layout: "empty",
asyncData() {
// ... code to get dynamicUrl for the user
}
}
</script>
It works, but the page is loaded with styles, javascript other nuxt-related things.
What I need is - just a simple HTML page(like a static page) but with dynamic content(without any styles and javascript files).
How to do it in nuxt?
This is what I need in the output:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="refresh" content="0;url=\'.....dynamicUrl'" />
<title>Redirecting...</title>
</head>
<body>
<div>Redirecting to <a :href="dynamicUrl">{{dynamicUrl}}</a>.</div>
</body>
</html>
Related
I have two files created in LWC OSS app
first file at src/client/index.html and src/client/index.js
second file at src/client/index2.html and src/client/index2.js
I want to navigate to index2.html when clicked on the button in my-app (LWC component) which is appended using index.js
Am new to express js and node js. Please help!
Below is the code of the files,
index.html (File location: src/client/index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>My LWC App</title>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
</style>
<!-- Block zoom -->
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1"
/>
<link rel="shortcut icon" href="./resources/favicon.ico" />
</head>
<body>
<div id="main"></div>
</body>
</html>
index.js (File location: src/client/index.js)
import { createElement } from 'lwc';
import MyApp from 'my/app';
const app = createElement('my-app', { is: MyApp });
// eslint-disable-next-line #lwc/lwc/no-document-query
document.querySelector('#main').appendChild(app);
app.html (File location: src/client/modules/my/app/app.html)
<template>
<!-- LWC sample component <my-greeting> -->
<div class="center greeting">
<!-- <my-greeting speed="slow"></my-greeting> -->
<my-greeting speed="medium"></my-greeting>
<!-- <my-greeting speed="fast"></my-greeting> -->
</div>
<div class="center">
<img src="./resources/lwc.png" />
</div>
<!-- Page code -->
<div class="center">
<div class="container">
<!-- prettier-ignore -->
<p class="info">
Edit <strong class="code">src/client/modules/my/app/app.html</strong>
<br />and save for live reload.
</p>
</div>
<div>
Learn LWC
<button onclick={redirect}>Click to redirect</button>
</div>
</div>
</template>
app.js (File location: src/client/modules/my/app/app.js)
import { LightningElement } from 'lwc';
export default class App extends LightningElement {
redirect(){
//code for to navigate to index2.html
}
}
index2.html (File Location: src/client/index2.html)
<html lang="en">
<body>
<div id="main"></div>
</body>
</html>
index2.js (File Location: src/client/index2.js)
import { createElement } from 'lwc';
import MyNewApp from 'my/newApp';
const app = createElement('my-app', { is: MyNewApp });
// eslint-disable-next-line #lwc/lwc/no-document-query
document.querySelector('#main').appendChild(app);
7.newApp.html (File location: src/client/modules/my/newApp/newApp.html)
<template>
<h1> Redirected to index2 --> newApp </h1>
</template>
Please let me know if you need more information.
Thanks,
Navaprasad
i try to add readspeaker webreader to my project in React. Working but only when push to edit options and pulse button play. When he read options and close, play again in webapp page and read OK. I send email to support im waiting for reply and adding the solution here...
For websites that heavily use JS to build the website client-side, the solution is to add general: { usePost: true }. That will send the whole loaded website in base64 to Readspeaker servers instead of just sending the URL that needs to be read.
Example:
public/index.html:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1"
/>
</head>
<body>
<noscript>
You Need JS
</noscript>
<div id="root"></div>
<script>
window.rsConf = {
params: `//cdn1.readspeaker.com/script/${ID_CUSTOMER}/webReader/webReader.js?pids=wr`,
general: { usePost: true }
};
</script>
</body>
</html>
important: window.rsConf
Component .jsx
import React, { useEffect } from "react";
import { Container } from "reactstrap";
const ReadSpeakerReader = () => {
useEffect(() => {
var oHead = document.getElementsByTagName('HEAD').item(0);
var oScript= document.createElement("script");
oScript.type = "text/javascript";
oScript.src=`//cdn1.readspeaker.com/script/${ID_USER}/webReader/webReader.js`;
oHead.appendChild(oScript);
}, [])
return (
<React.Fragment>
<section className="readspeaker-button-section mt-3 mb-2">
<Container>
<div id="readspeaker_button1" className="rs_skip rsbtn">
<a rel="nofollow"
className="rsbtn_play"
accessKey="L"
title="Escucha esta página utilizando ReadSpeaker webReader"
href={`//app-na.readspeaker.com/cgi-bin/rsent?customerid=${ID_CUSTOMER}&lang=es_co&readid=main-content-privateBCI&url=${encodeURIComponent( document.location.href )}`}
>
<span className="rsbtn_left rsimg rspart">
<span className="rsbtn_text">
<span>Escuchar</span>
</span>
</span>
<span className="rsbtn_right rsimg rsplay rspart"></span>
</a>
</div>
</Container>
</section>
</React.Fragment>
)
}
export default ReadSpeakerReader
With this your readspeaker webreader working well when your component is mounted in DOM
I watched a video lesson on vueschool and repeated the code as the teacher. But it doesn't work for me, and it works for him. In the browser console, it shows that there is no template indexer, but why does it all work?
HTML:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="app">
<p>Просто текст</p>
<click-counter></click-counter>
<click-counter></click-counter>
<click-counter></click-counter>
</div>
<script scr="vue.js"></script>
<script src="app.js"></script>
</body>
</html>
vue js
Vue.component ('click-counter', {
template: "<button #click="count++">{{count}}</button>",
data() {
return {
count: 0
}
}
})
new Vue ({
el: "#app"
})
In the component template, please use ' quotes to wrap the click function. Since you are using double quotes to wrap button, the same cannot be used in it which tends to close the first one.
Please find below the code
Vue.component('click-counter', {
template: "<button #click='count++'>{{count}}</button>",
data() {
return {
count: 0
}
}
})
new Vue({
el: "#app"
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.0/vue.js"></script>
<div id="app">
<click-counter/>
</div>
Change this line:
"<button #click="count++">{{count}}</button>"
Give this:
"<button #click='count++'>{{count}}</button>"
Make sure that, you have import vuejs in your file.
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
I am trying to create a project with React and Webpack. I am new in using these, but none of the solutions found related to the error that I have did work.
I have my StartPage.html, using StartPage.js which builds, is present in bundle.js and runs perfectly.
StartPage.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Copyright application</title>
</head>
<body>
Image Upload
<div id="root2"></div>
</body>
</html>
StartPage.js
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
class StartPage extends Component {
render() {
return (
<div> StartPage </div>
);
}
}
ReactDOM.render(
<StartPage />,
document.getElementById('root2')
);
export default StartPage
But now I have ImageUploader.html which is build in the same style, but with a more complex side on ImageUploader.js
ImageUploader.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Upload Image</title>
</head>
<body>
<div id="image"></div>
</body>
</html>
ImageUploader.js - just the render and the DOM
render() {
return (
<div className="ImageUploader">
<nav className="navbar pure-menu pure-menu-horizontal">
IPFS File Upload DApp
</nav>
<main className="container">
<div className="pure-g">
<div className="pure-u-1-1">
<h1>Your Image</h1>
<p>This image is stored on IPFS & The Ethereum Blockchain!</p>
<h2>Upload Image</h2>
<form onSubmit={this.onSubmit} >
<input type='file' onChange={this.captureFile} />
<input type='submit' />
</form>
</div>
</div>
</main>
</div>
);
}
}
ReactDOM.render(
<ImageUploader />,
document.getElementById('image')
);
export default ImageUploader
This one is not created in bundle.js, although the webpack creates it.
Webpack folder after npm run build
But I have this error in the console: _registerComponent(...): Target container is not a DOM element .. which I have exhaustively researched and none of the found solutions worked for me: like changing the order of the div id="" with the bundle.js script
like this one, where the script is created automatically by webpack
I have spent quite a lot of time on this error or trying to find another solution to create the multiple pages with Webpack.
This is webpack.config.prod.js and dev is defined in the same way regarding the pages:
webpack.config.prod.js
plugins: [
new InterpolateHtmlPlugin({
PUBLIC_URL: publicUrl
}),
new HtmlWebpackPlugin({
template: './src/public/StartPage.html',
inject: true,
chunks: ['start'],
filename: 'StartPage.html'
}),
new HtmlWebpackPlugin({
template: './src/public/ImageUploader.html',
inject: true,
chunks: ['image'],
filename: 'ImageUploader.html'
}),
And I have specified the .js file in the entry of module.exports:
entry: {
image: './src/ImageUploader/ImageUploader.js',
start: './src/StartPage/StartPage.js'
If someone has an idea about what could be wrong with this..
I want to use an On-Screen-Keyboard in my project which is written in Aurelia platform (WebStorm+Aurelia+Typescript). For this purpose we have to use a JavaScript/HTML based keyboard.
The following code is suitable for me:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="https://code.jquery.com/jquery-git.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
<link rel="stylesheet" href="https://mottie.github.io/Keyboard/css/keyboard.css">
<script src="https://mottie.github.io/Keyboard/js/jquery.keyboard.js"></script>
<script src="https://mottie.github.io/Keyboard/js/jquery.mousewheel.js"></script>
<script src="https://mottie.github.io/Keyboard/js/jquery.keyboard.extension-typing.js"></script>
<script>
/* VIRTUAL KEYBOARD DEMO - https://github.com/Mottie/Keyboard */
$(function() {
$('#keyboard').keyboard({
layout: 'qwerty'
})
// activate the typing extension
.addTyping({
showTyping: true,
delay: 250
});
});
</script>
</head>
<body>
<div id="wrap">
<input id="keyboard" type="text" />
</div>
</body>
</html>
<body>
<div id="wrap">
<input class="keyboard" type="text" />
<input class="keyboard" type="text" />
<input class="numpad" type="text" />
</div>
</body>
</html>
I don't know how I can integrate this code in the project. Could you please help me?
As far as how to add the jQuery plugin to your project, there are many blog posts on how to do that, and the answer depends on what module loader/bundler you are using.
Regarding the specifics of using a jQuery plugin like this, I would use a custom attribute.
Here's an example: https://gist.run?id=87b7807ef8a50301fe358b26f7263056
keyboard.js
import {inject} from 'aurelia-framework';
#inject(Element)
export class KeyboardCustomAttribute {
constructor(el) {
this.el = el;
}
attached() {
$(this.el).keyboard({
layout: 'qwerty'
})
// activate the typing extension
.addTyping({
showTyping: true,
delay: 250
});
}
}
app.html
<template>
<require from="./keyboard"></require>
<div>
<label>Name: </label>
<input type="text" value.bind="name" keyboard />
</div>
</template>
Note that in this example, I just loaded the jQuery stuff using script tags to make my life simpler.