I'm making a website using Javascript and Vue.js and found a plugin for making a 3d carousel https://www.bestjquery.com/?ynVfL3CE,but when i import these i get the error "Uncaught SyntaxError: Cannot use import statement outside a module".My code below.
<html>
<head>
<script src="js/vue.js"></script>
<script src="js/carousel.js"></script>
</head>
<body>
<div id="example">
<carousel-3d :autoplay="true" :autoplay-timeout="5000" :display="3">
<slide v-for="(slide, i) in slides" :index="i">
<span class="title">You know</span>
<p>You know, being a test pilot isn't always the healthiest business in the world.</p>
</slide>
</carousel-3d>
</div>
<script>
new Vue({
el: '#example',
data: {
slides: 7
},
components: {
'carousel-3d': Carousel3d.Carousel3d,
'slide': Carousel3d.Slide
}
})
</script>
Code from carousel.js
import Vue from 'vue';
import Carousel3d from 'vue-carousel-3d';
Vue.use(Carousel3d);
try the updated module syntax https://jakearchibald.com/2017/es-modules-in-browsers/:
<script type="module" src="js/carousel.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'm trying to make some innovations on this big JSF-javaBackend app we have
So I am working with ReactJS and thinking why not both. So far I can call the reactJS library and print some small component, also the same logic using JSX. And both of them work just fine
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html" >
<h:head>
<title>Test React JSF</title>
<link rel="stylesheet" type="text/css" href="../../../../../resources/Adamantium/adamantium-layout/css/font-awesome.css"/>
<link rel="stylesheet" type="text/css" href="../../../../../resources/css/style.css"/>
<link rel="stylesheet" type="text/css" href="./static/css/main.1ab75c23.chunk.css"/>
</h:head>
<h:body >
<h2> React vanilla </h2>
<!-- We will put our React component inside this div. -->
<div id="like_button_container"></div>
<!-- Load React. -->
<!-- Note: when deploying, replace "development.js" with "production.min.js". -->
<script src="https://unpkg.com/react#16/umd/react.development.js" ></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js" ></script>
<!-- Don't use this in production: -->
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.min.js"></script>
<!-- Load our React component. -->
<script src="like_button.js"></script>
<br/>
<br/>
<br/>
<h2> JSX </h2>
<div id="babel"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('babel')
);
</script>
<br/>
<br/>
<br/>
<script src="./static/js/1.6105a37c.chunk.js" type="application/javascript" ></script>
<script src="./static/js/main.7bbc540b.chunk.js" type="application/javascript" ></script>
<h2> React JSXs Bundles </h2>
<div id="root"></div>
</h:body>
</html>
My problem starts when I try to use something a little bit more complex, which is a build with babel create-react-app (npm run build) which prints nothing, no errors, no warnings, no weblogic fail on parsing, just do nothing. I have experience with both frameworks but I can't merge them even for a dumb component (no state component)
I suspect of XHTML trying to read my bundled react app not as a JavaScript file, but it should have been fixed with the "type="application/javascript" tag.
I will leave here the like button, the JSX and vanilla react are examples from the react docs
'use strict';
const e = React.createElement;
class LikeButton extends React.Component {
constructor(props) {
super(props);
this.state = { liked: false };
}
render() {
if (this.state.liked) {
return 'You liked this.';
}
return e(
'button',
{ onClick: () => this.setState({ liked: true }) },
'Like'
);
}
}
const domContainer = document.querySelector('#like_button_container');
ReactDOM.render(e(LikeButton), domContainer);
I'm creating a slider web component from scratch to learn.
I want the button to hide when the attribute controlVisible is false and show when it's true, but my selector $('#botaoVoltar') doesn't get anything.
What am I missing?
index.html:
<body>
<slider-js controlVisible='false' ></slider-js>
</body>
polymer.html:
<polymer-element name="slider-js">
<template>
<center>
<div id="container">
<div id="Buttons">
<button name="voltar" id="botaoVoltar"><<</button>
</div>
</div>
</center>
</template>
</polymer-element>
<script>
Polymer('slider-js', {
controlVisible: false,
ready: function () {
if (this.controlVisible === false) {
$('#botaoVoltar').hide();
} else {
$('#botaoVoltar').show();
}
}
});
</script>
The attribute is working fine. If I console.log it, I can see if it is true or false, but the template still renders with the button.
jQuery can't get at Polymer's local DOM, so you'd have to use Polymer's own DOM API. Actually, Polymer's automatic node finding provides quick access to nodes that have IDs with this.$. For instance, you could access the botaoVoltar button in your example with this.$.botaoVoltar.
It looks like you're using old Polymer (pre 1.0). You should switch to the latest version of Polymer (1.5.0). Here's your code upgraded to the newest Polymer version:
<head>
<base href="https://polygit.org/polymer+1.5.0/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="polymer/polymer.html">
</head>
<body>
<span>With control-visible:</span>
<x-slider control-visible></x-slider>
<span>Without control-visible:</span>
<x-slider></x-slider>
<!-- Normally, you would define this element in its own file. -->
<dom-module id="x-slider">
<template>
<div id="container">
<div id="Buttons">
<button id="botaoVoltar"><<</button>
<button>>></button>
</div>
</div>
</template>
<script>
HTMLImports.whenReady(function() {
Polymer({
is: 'x-slider',
properties : {
controlVisible: {
type: Boolean,
value: false
}
},
ready: function() {
this.$.botaoVoltar.hidden = !this.controlVisible;
}
});
});
</script>
</dom-module>
</body>
codepen
maybe this is a trivial question.
so, when I run my vuejs application on browser with enables throttling download speed (sets to low connection). I got unfinished vue syntax output in browser.
I know we can trick this out with showing loading image before entire page has loaded, but it's there any best solution to fix this?
You can use the v-cloak directive, which will hide the Vue instance until the compilation finishes, if you combine it with the right CSS.
HTML:
<div v-cloak>{{ message }}</div>
CSS:
[v-cloak] { display: none; }
I attached the following codepen. You can see the difference with and without v-cloak.
<div id="js-app">
[regular]Hold it... <span>{{test}}</span><br/>
[cloak]Hold it... <span v-cloak>{{test}}</span>
</div>
http://codepen.io/gurghet/pen/PNLQwy
As suggested by others using v-cloak is proper solution. However as # DelightedD0D mentioned it IS clunky. Simple solution is to add some CSS in the pseudo selector ::before of v-cloak directive.
In your sass/less file something along the lines of
[v-cloak] > * { display:none; }
[v-cloak]::before {
content: " ";
display: block;
position: absolute;
width: 80px;
height: 80px;
background-image: url(/images/svg/loader.svg);
background-size: cover;
left: 50%;
top: 50%;
}
Of course you'd need to provide a valid and accessible path to loader image. It will render something like.
Hope it helps.
Using v-cloak directive you can hide un-compiled mustache bindings until vue instance is done compiling. You must use the CSS block to hide it until compiled.
HTML:
<div v-cloak>
{{ vueVariable }}
</div>
CSS:
[v-cloak] {
display: none;
}
This <div> will not be visible until the compilation is completed.
You can see this link Hide elements during loading using v-cloak for better understating.
Don't include any vuejs syntax in the HTML file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>My Super app</title>
</head>
<body>
<div id="app"></div>
<script src="/app.js"></script>
</body>
</html>
In your main JavaScript, you can:
import Vue from 'vue'
import App from './App'
new Vue({
el: '#app',
components: { App },
template: '<App/>'
})
See the vuetify webpack template for reference.
Another solution is to use:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>My Super app</title>
</head>
<body>
<div id="app" is="App"></div>
<script src="/app.js"></script>
</body>
</html>
With:
import Vue from 'vue'
import App from './App'
Vue.component("App", App);
const app = new Vue({});
window.addEventListener("load", async () => {
app.$mount("#app")
})
Putting everything inside a <template> worked well for me.
The content is hidden until rendered by Vue.
<!-- index.html -->
<div id="app">
<template>
<span class="name">{{ name.first }} {{ name.last }}</span>
</template>
</div>
/* index.js */
new Vue({
el: '#app',
data: {
name: { first: 'David', last: 'Davidovich'}
}
});
**html**
<div v-cloak>{{ message }}</div>
**css**
[v-cloak] { display: none; }
Use <v-cloak> to hide your Vue code before binding data to relevant places. It's actually located in a place on Vue documentation that anyone might miss it unless you search for it or read thoroughly.
You could move any rendering to a simple wrapper component. The VueJS initialisation e.g. new Vue(....) shouldn’t contain any HTML apart from that single wrapper component.
Depending on setup you could even have <app>Loading...</app> where app is the wrapper component with any loading HTML or text in between which is then replaced on load.
Yep, you can use v-cloak, I like use spinkit, is a great library with only CSS, check a simple example:
var vm = null;
setTimeout(function() {
vm = new Vue({
el: '#app',
data: {
msg: 'Is great, using: ',
url: 'http://tobiasahlin.com/spinkit/'
}
});
}, 3000);
#app .sk-rotating-plane,
[v-cloak] > * { display:none }
body{
background: #42b983;
color: #35495e;
}
#app[v-cloak] .sk-rotating-plane {
display:block;
background-color: #35495e;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/tobiasahlin/SpinKit/master/css/spinkit.css">
<div id="app" v-cloak>
<div class="sk-rotating-plane"></div>
<h1>Vue with c-cloak</h1>
<p>
{{ msg }}
<a :href='url'>{{ url }}</a>
<p>
</div>
Link:
- http://tobiasahlin.com/spinkit/
For those who use v-cloak in a view with multiple Laravel Blade files and it's not working, try to use the v-cloak on the parent blade file rather than in any child blade file.
I prefer using v-if with a computed property that checks if my data is ready, like this:
<template>
<div v-if="shouldDisplay">
{{ variableName }}
</div>
<div v-else>
Here you can insert a loader
</div>
</template>
<script>
export default {
name: 'Test',
data() {
return {
variableName: null,
};
},
computed() {
shouldDisplay() {
return this.variableName !== null;
}
},
mounted() {
this.variableName = 'yes';
},
};
</script>
In this way it's easier to show a loader only if the data is not ready (using v-else).
In this particular case v-if="variableName" would work as well, but there can be more complicated scenarios.