I want to use one component of my Vue website on another website by embedding it in HTML.
I decided to use https://github.com/karol-f/vue-custom-element and reference to this guide.
I tried the following in my main.js file after installing vue-custom-element and document-register-element npm packages.
import Vue from 'vue';
import vueCustomElement from 'vue-custom-element';
import 'document-register-element/build/document-register-element';
import reusableComponent from './components/reusableComponent.vue';
Vue.use(vueCustomElement);
Vue.customElement('reusable-component', reusableComponent);
And then I was trying to use on another website like that.
<reusable-component><reusable-component />
<link href="/dist/static/css/app.36dd3e0b96e06ae6f3130a58cf185192.css" rel="stylesheet">
<script type="text/javascript" src="/dist/static/js/manifest.2ae2e69a05c33dfc65f8.js">.
</script>
<script type="text/javascript" src="/dist/static/js/vendor.614f0593bd5c53cf6320.js">.
</script>
<script type="text/javascript" src="/dist/static/js/app.1c44a427c10b2e559de0.js"></script>
But before I tried to use the reusable component in another website, my main website was crashed by this error.
Has anyone faced this issue before?
Thank you in advance!
I think it's not correct use of vue-custom-element.
If you are going to use the whole project as a widget for the different project, it would be possible.
Vue.customElement('reusable-component', reusableComponent);
So, this library is to import the App.vue, not only specific component of the project.
Vue.customElement('reusable-component', App);
Related
I'm pretty new to React and I've been trying to set up a REACT app. However, I always get a blank page. Can anyone help?
HTML Code (index.html)
<html>
<head>
<meta charset="UTF-8" />
<title>Home</title>
</head>
<body>
<div id="root"></div>
<script src="index.js" type="text/babel"></script>
</body>
</html>
Javascript (index.js)
import React from "react"
import ReactDOM from "react-dom"
const page = (
<div>
<h1>My page</h1>
</div>
)
ReactDOM.render(page, document.getElementById("root"));
And yes, I am using a live server to run this code.
Browsers don't understand the text/babel MIME type.
It is there for Babel to search the DOM for scripts that it should process to convert from whatever they are (JS + JSX in this case) to JS.
You haven't included Babel in your page though.
You have a further problem in that inside your script you have import statements which depend on Node.js module resolution (and you're using a browser, not Node).
You should start at the beginning of the React guide.
You currently have an odd mix of about 20% of the quick guide to adding React to a website and 5% of using a Node.js based toolchain to transpile your code.
I recommend starting with create-react-app as it gives you a robust, performant foundation to get started with.
Say I only import this file in a script tag.
What does Vue.js has to offer as a technology that I cannot access by referring only to:
<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
After some more research, I've found Vue.js has a CDN for vue-router.
<!-- vue-router -->
<script src="https://unpkg.com/vue-router#2.0.0/dist/vue-router.js"></script>
I wanna be able to use the pattern
<template>
<script>
<style>
..but I don't want to import or installl anything else.
You want to use single file component.
But it's only possible in a .vue file which is compiled by webpack, browserify or rollup. It's not possible to do that by just import vue.js in a html file.
I'm trying to use VKThread in React. However it doesn't appear
to be available as an npm package. according to the instructions, they say to add <script src="../vkthread/vkthread.min.js" type="text/javascript"></script> to your project. However I don't know how I can do this in a react app.
Any help is appreciated, thanks very much!
You have a "traditional" index.html located in /public. You can add any script such as your <script src="../vkthread/vkthread.min.js" type="text/javascript"></script> in the body there.
I'm creating a web app using node and react. Rather than seperate Node and React apps I want to integrate React into it. So rather than a react app, I tried importing react CDN into the index.html. My server serves the index.html perfectly, but I'm getting an error in the react component.
this is my index.html
<html>
<head>
<meta charset="utf-8">
<title>React Powered chat App</title>
</head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.4/socket.io.js" charset="utf-8"></script>
<script src="/scripts/main.js" charset="utf-8"></script>
<body>
Hello !
<div id ='App'></div>
</body>
</html>
and this is my main.js
class App extends React.Component {
render(){
return (
<div>
Hello !
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('App'));
The error I'm getting is
Uncaught SyntaxError: Unexpected token < main.js:4
What have I done wrong? Isn't it possible to use react with CDN ?
And first when I used react/cjs/react.development libraries I got more errors. Then after reading this stackoverflow question I use /react/umd/ libraries. So what's the difference between cjs and umd CDN libraries ?
The code doesn't work because react uses JSX (HTML inside javascript), which cannot be read by the browser and needs to be transpiled to ordinary javascript which can be read by browsers. One such transpiler is babel. Your code doesn't work due to the absence of transpiler.
You can use create-react-app, which comes bundled with the transpiler and everything that you'll need to get started with react. And as I understand, since you want to add your express backend, here is a tutorial that will help you get started with attaching create-react-app to your express backend. Hope this helps.
Since JSX (the HTML code sprinkled in the JavaScript) is not regular JavaScript or ES6 code, you cannot load it directly in your browser.
So the problem is not getting the React library from a CDN, that’s fine.
The problem is that you have to transpile your main.js file to regular JavaScript code, for example using Babel.
The most commonly used tool to do this transpilation with Babel automatically is webpack.
If you don’t want to learn how to set up webpack and Babel in detail, I recommend to use create-react-app, this takes the burden of setting up all of the boilerplate from your shoulders and creates a JavaScript bundle that you can use directly in your browser.
Note: if you do end up using create-react-app, you don’t need to get the React lib from a CDN, it will already be included in the bundle.
You also need to add babel cdn in the Html file which would convert JSX to JS
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
I've wanted to create simple desktop app which uses React JS for data presentation.
However, I'm overwhelmed with so many modules and technologies. There is an electron react boilerplate which very complicated for starters like me.
I have simple project with these libs:
electron as dev
react
react-dom
I have main.js in my root path of my project which launches electron and it is taken from this quickstart example
I have index.html file where my JSX should be loaded:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<div id="react-view"></div>
</body>
<script type="text/jsx">
// You can also require other files to run in this process
require('./scripts/application');
</script>
</html>
There are scripts/application.js file where my JSX will be populated to my <div id="react-view"></div>.
My App.jsx is very simple:
import React, {Component} from 'react'
class App extends Component{
render() {
return <h1>Hello From React</h1>;
}
}
export default App;
My application.js file looks like this:
import React from 'react';
import ReactDom from 'react-dom/server';
import App from 'components/App';
ReactDom.render(<App/>, document.getElementById("react-view"));
When I launch my electron application it opens me a window with empty content, which means that my JSX is not loaded. And it does not throw any error messages
What did I miss?
Here is the problem - no one understands JSX except a transpiler.
Two ways, you can get JSX work -
use a browser based/client side transpiler (use only for development
purpose)
include this file as a script tag
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.js"></script>
use type="text/babel" on your script tag which loads your JSX
<script type="text/babel" src="index.js"></script>
checkout the sample here - https://github.com/rabibiswal/reactdemo/tree/master/hello-world-jsx
user a server based transpiler - e.g. Babel
You can use different tools like webpack etc.
checkout the sample here -
https://github.com/rabibiswal/reactdemo/tree/master/hello-world-react-es5
You need to install node and use npm install and npm run build to get this code working