I am facing issue with React application while compilation.
Please find the issue below and screenshot.
ERROR in ./node_modules/web3-providers-http/lib/index.js 30:11-26
Module not found: Error: Can't resolve 'http' in '/Users/rohit/Downloads/Personal/web3/react-minting-website/node_modules/web3-providers-http/lib'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "http": require.resolve("stream-http") }'
- install 'stream-http'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "http": false }
# ./node_modules/web3-core-requestmanager/lib/index.js 56:16-46
# ./node_modules/web3-core/lib/index.js 23:23-58
# ./node_modules/web3/lib/index.js 32:11-31
# ./src/index.js 10:0-24 14:13-17
On scrutiny, I found out Issue is with web3 related dependencies :
https://www.npmjs.com/package/web3
https://www.npmjs.com/package/#web3-react/core
https://www.npmjs.com/package/#web3-react/injected-connector
Can someone please help me with the same? I am using LTS versions, What are stable versions of these?
web3.js has updated their readme to included troubleshooting steps. Ref. link.
Web3 and Create-react-app
If you are using create-react-app version >=5 you may run into issues building. This is because NodeJS polyfills are not included in the latest version of create-react-app.
Solution
Install react-app-rewired and the missing modules
If you are using yarn:
yarn add --dev react-app-rewired process crypto-browserify stream-browserify assert stream-http https-browserify os-browserify url buffer
If you are using npm:
npm install --save-dev react-app-rewired crypto-browserify stream-browserify assert stream-http https-browserify os-browserify url buffer process
Create config-overrides.js in the root of your project folder with the content:
const webpack = require('webpack');
module.exports = function override(config) {
const fallback = config.resolve.fallback || {};
Object.assign(fallback, {
"crypto": require.resolve("crypto-browserify"),
"stream": require.resolve("stream-browserify"),
"assert": require.resolve("assert"),
"http": require.resolve("stream-http"),
"https": require.resolve("https-browserify"),
"os": require.resolve("os-browserify"),
"url": require.resolve("url")
})
config.resolve.fallback = fallback;
config.plugins = (config.plugins || []).concat([
new webpack.ProvidePlugin({
process: 'process/browser',
Buffer: ['buffer', 'Buffer']
})
])
return config;
}
Within package.json change the scripts field for start, build and test. Instead of react-scripts replace it with react-app-rewired
before:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
after:
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject"
},
The missing Nodejs polyfills should be included now and your app should be functional with web3.
If you want to hide the warnings created by the console:
In config-overrides.js within the override function, add:
config.ignoreWarnings = [/Failed to parse source map/];
If you are using create-react-app version >=5 you may run into issues building. This is because NodeJS polyfills are not included in the latest version of create-react-app.
Currently CRA ships react-scripts with version 5.0.0. Instead of ejecting CRA, just downgrade react-scripts to version 4.0.3. I was facing the same issue, downgrading worked for me.
First remove old version
npm uninstall react-scripts
Then run the following:
npm i react-scripts#4.0.3
as webpack grows in size, they removed the polyfills in webpack5. Looks like you are using create-react-app (CRA) and webpack configuration is not exposed to the user in CRA. you can expose it using eject. you might have this script in package.json:
"eject": "react-scripts eject"
so run npm run eject. This is not recommended because it means that you will no longer benefit from the updates of CRA.
you can handle ejecting with either rewire or craco.
After you get the webpack configuration, you need to add resolve property to webpack config and install all those required packages :
resolve: {
extensions: [".js", ".css"],
alias: {
// add as many aliases as you like!
// optional
components: path.resolve(__dirname, "src/components"),
},
fallback: {
// path: require.resolve("path-browserify"),
fs: false,
assert: require.resolve("assert/"),
os: require.resolve("os-browserify/browser"),
constants: require.resolve("constants-browserify"),
stream: require.resolve("stream-browserify"),
crypto: require.resolve("crypto-browserify"),
http: require.resolve("stream-http"),
https: require.resolve("https-browserify"),
},
},
I have webpac5 Boilerplate. you can use it if you want:
Since there are too many polyfills, instead of manually installing all, you can use node-polyfill-webpack-plugin package. instead of fallback property
const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");
plugins: [
new HtmlWebpackPlugin({
title: "esBUild",
template: "src/index.html",
}),
// instead of fallback
new NodePolyfillPlugin(),
new webpack.ProvidePlugin({
process: "process/browser",
Buffer: ["buffer", "Buffer"],
React: "react",
}),
],
webpack5 boilerplate github repo
Web3 and Create-react-app
If you are using create-react-app version >=5 you may run into issues building. This is because NodeJS polyfills are not included in the latest version of create-react-app.
Refer the Solution in the Below link
https://github.com/ChainSafe/web3.js#troubleshooting-and-known-issues
Related
I'm trying to make Vite build my files and output them into the dist folder every time I save/make changes on to my files during development.
How would I do that?
Here is my vite.config.development.js file:
import { defineConfig } from "vite";
export default defineConfig({
base: "./",
build: {
rollupOptions: {
output: {
assetFileNames: "assets/[name].[ext]",
chunkFileNames: "assets/[name].[ext]",
entryFileNames: "assets/[name].js",
},
},
write: true,
},
});
Here is my scripts in package.json:
"frontend-dev": "vite --config vite.config.development.js",
It does the usual localhost:3000 thing, but it does not build my files and put them in the dist folder when I make changes to my source code.
Currently, I have to run a vite build npm script every time which takes a lot of time.
If you want Vite to do a rebuild on file changes, you can use the --watch flag:
vite build --watch
In your case, with a custom config file:
vite build --watch --config vite.config.development.js
With the --watch flag enabled, changes to the config file, as well as any files to be bundled, will trigger a rebuild and will update the files in dist.
Do you know NodeJS? If you know NodeJS, you can monitor folders and files with the fs module. By monitoring the src directory, you can trigger the vite whenever there is a change. This is the manual solution. I don't know if there are currently npm packages that provide this.
NodeJS Filestream Watch
Building on #Mussini's answer, you got options:
add --watch and optional --config vite build --watch --config vite.config.ts on cli
or add to package.json:
{
"name": "frontend",
...
"scripts": {
"dev": "vite",
...
"build-watch": "vite build --watch --config ./vite.config.ts",
"build": "vite build",
or integrate --watch into the vite.config.ts which adds watching to the build cmd by default (vite build does not exit!)
export default defineConfig({
build: {
watch: './vite.config.ts',
You likely want option 2 and use with npm run build-watch
I tried setting up the JIT in create-react-app by myself but it doesn't seem to be working as in the styles are not getting updated. I am using craco to build the app with tailwind css and also added TAILWIND mode=WATCH as they suggested to make it work with most builds . Here are my configs:
tailwind.config.js
module.exports = {
mode: "jit",
purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {
colors: {
primary: "#ffa500",
secondary: {
100: "#E2E2D5",
200: "#888883",
},
},
},
},
variants: {
extend: {
opacity: ["disabled"],
},
},
plugins: [],};
package.json scripts
"scripts": {
"start": " craco start",
"build": "TAILWIND_MODE=watch craco build",
"test": "craco test",
"server": "nodemon ./server/server.js",
"eject": "react-scripts eject"
},
package.json devDependencies
"devDependencies": {
"autoprefixer": "^9.8.6",
"postcss": "^7.0.36",
"tailwindcss": "npm:#tailwindcss/postcss7-compat#^2.2.4"
},
I'll be glad if I could get any way to fix this .
If you are on Windows (as I suspect you might be from your comment on #Ako's answer), then your setup is correct but you just need to install cross-env, then adjust your start script like so:
"start": "cross-env TAILWIND_MODE=watch craco start"
you must use TAILWIND_MODE=watch in your start script not build, and after you have developed what you want build it just with craco build script. so your package.json scripts must look like this:
"scripts": {
"start": "TAILWIND_MODE=watch craco start",
"build": "craco build",
"test": "craco test",
"eject": "react-scripts eject",
},
also in purge prop inside the tailwind.config.css file you must add './src/components/*.{js,jsx}' so purge should look like this:
purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html', './src/components/*.{js,jsx}'],
and after you built your app you must serve the index.html file inside build folder.
clone this repo and after building the project use npm run servebuild and see if it works.
https://github.com/ako-v/cra-tailwindcss-jit-craco
So you have to watch your JSX, JS, HTML files using the ```--watch``` option provided in tailwindcss CLI,
So what you can do is open up a new terminal in the root of the react project and follow the command below
npx tailwindcss -o ./src/App.css --watch
[-i] you can provide a input file also using this option.
[-o] modify the output as per your folder structure.
This will make sure to rebuild the CSS file,
Next step is to open up another terminal and do npm start and your development server is ready with JIT compiler.
(side note)
Also, I use tailwind with my default configuration of the package.json and it also works smoothly without craco (both JIT / default) and in production.
I would like to move my jest config out of my package.json, i am trying to use the --config as suggested here but get the error argv.config.match is not a function
package.json
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --config jest.config.js",
"eject": "react-scripts eject",
},
cli
hutber#hutber-mac:/var/www/management/node$ npm test -u
> management-fresh#0.1.0 test /var/www/management/node
> react-scripts test --config jest.config.js
Usage: test.js [--config=<pathToConfigFile>] [TestPathPattern]
argv.config.match is not a function
npm ERR! Test failed. See above for more details.
For me appending -- --config=jest.config.js worked.
So the whole string react-scripts test -- --config jest.config.js in your case.
TL;DR
Add -- before your options.
"test": "react-scripts test -- --config=jest.config.js",
The problem here is with react-scripts not seeing the options being passed to
it. We can demonstrate this by running it directly.
./node_modules/.bin/react-scripts test --config=jest.config.js
# argv.config.match is not a function
./node_modules/.bin/react-scripts test -- --config=jest.config.js
# This works.
Variations
How you pass options to scripts varies depending on which versions of npm or
Yarn you use. For completeness, here are the results for the variations:
# This runs, but completely ignores the option.
npm test --config=jest.config.js
# These result in "argv.config.match is not a function," indicating that the
# options were not understood.
npm test -- --config=jest.config.js
yarn test -- --config=jest.config.js
yarn test --config=jest.config.js
https://jestjs.io/docs/en/cli#using-with-yarn
https://jestjs.io/docs/en/cli#using-with-npm-scripts
create react app sets up the test script in package.json with
"test": "react-scripts test",
You can set additional options like so.
"test": "react-scripts test -- --config=jest.config.js",
Something like this might work if you want to send options through the CLI.
"test": "react-scripts test --",
yarn test --bail
# comes through as
react-scripts test -- --bail
Resources
Here are a few resources to explain the different usage.
https://medium.com/fhinkel/the-curious-case-of-double-dashes-b5e7711698f
For me adding jest as key in package.json file worked. Added all the required config as object in jest key rather than jest.config.js
"jest": {
"collectCoverageFrom": [
"src/**/*.js",
"!**/node_modules/**"
],
"coverageReporters": [
"text-summary",
"lcov",
"cobertura"
],
"testMatch": [
"**/*.test.js"
]
},
tldr
npm install jest --save-dev (not sure if this is required -- I just did it).
replace
"scripts": {
...
"test": "react-scripts test",
...
},
with
"scripts": {
...
"test": "jest --watch",
...
},
run tests as normal with npm test
Everything
Adding -- --config=jest.config.js sort of work for me: my tests passed, but then I was getting the following error (truncated):
Invalid testPattern --config=jest.config.js|--watch|--config|{"roots":["<rootDir>/src"]
...
Running all tests instead.
This problem is noted in the comment above.
Here's what's going on:
npm test looks in package.json for whatever is in scripts.test and runs that. For create-react-app, that's react-scripts test. This, in turn, runs
/node_modules/react-scripts/scripts/test.js (source) (you can easily print debug this to see what's going on). This script builds up a jest configuration based on your environment. When you add:
"test": "react-scripts test -- --config=jest.config.js",
to package.json, this replaces the jest config that react-scripts test is trying to create (yea!), but it also munges the arguments that "test": "react-scripts test" generates (boo!), so jest thinks you're trying to pass in a test pattern (which is obviously not a valid test pattern).
So, I decided to try running my tests using the jest CLI. At least for me, it worked fine and picked up all of my tests. It automatically looks for jest.config.js, so that works, and you can pass --watch in to get the same behavior as react-scripts test.
Keep in mind that react-scripts test seems to be going through a lot of trouble to build up a 'proper' config; I definitely haven't tried to figure all of that out: YMMV. Here's the full set of options it creates in my env. E.g., for --config the next element in the array is the config.
[
'--watch',
'--config',
'{"roots":["<rootDir>/src"],
"collectCoverageFrom":["src/**/*.{js,jsx,ts,tsx}",
"!src/**/*.d.ts"],
"setupFiles":["<my_root_elided>/node_modules/react-app-polyfill/jsdom.js"],
"setupFilesAfterEnv":["<rootDir>/src/setupTests.js"],
"testMatch":["<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
"<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}"],
"testEnvironment":"jsdom",
"testRunner":"<my_root_elided>/node_modules/jest-circus/runner.js",
"transform":{
"^.+\\\\.(js|jsx|mjs|cjs|ts|tsx)$":"<my_root_elided>/node_modules/react-scripts/config/jest/babelTransform.js",
"^.+\\\\.css$":"<my_root_elided>/node_modules/react-scripts/config/jest/cssTransform.js",
"^(?!.*\\\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)":"<my_root_elided>/node_modules/react-scripts/config/jest/fileTransform.js"},
"transformIgnorePatterns":["[/\\\\\\\\]node_modules[/\\\\\\\\].+\\\\.(js|jsx|mjs|cjs|ts|tsx)$",
"^.+\\\\.module\\\\.(css|sass|scss)$"],
"modulePaths":[],
"moduleNameMapper":{"^react-native$":"react-native-web",
"^.+\\\\.module\\\\.(css|sass|scss)$":"identity-obj-proxy"},
"moduleFileExtensions":["web.js", "js", "web.ts", "ts", "web.tsx", "tsx", "json", "web.jsx", "jsx", "node"],
"watchPlugins":["jest-watch-typeahead/filename", "jest-watch-typeahead/testname"],
"resetMocks":true,
"rootDir":"<my_root_elided>"}',
'--env',
'<my_root_elided>/node_modules/jest-environment-jsdom/build/index.js'
]
This one got me too! create react app is a bit tricky as it already contains jest. I removed the
--config jest.config.js line, and didn't need that extra test.config file.
I also made sure my enzyme file was named setupTests.js. The testing module will be specifically looking to run that file, so it must be named that. Also,I had to have it in my src/ folder, where before I had it in a src/test folder. If you are asking the above question you are probably past this point, but wanted to mention just in case. My setupTests.js looks like:
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({
adapter: new Adapter()
})
For me, none of the above answers worked. But with the help of documentation, I found out the way around.
For this purpose, place the code you want to configure jest, in your_project_root_folder/src/setupTests.js. My your_project_root_folder/src/setupTests.js looks like this
import Enzyme from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'
Enzyme.configure({
adapter: new Adapter(),
})
And one more important point, you need to use enzyme-adapter-react-16 for react v16 and enzyme-adapter-react-15 for react v15
Moreover, if you want to use enzyme-to-json, you can place the following code in package.json file
"jest": {
"snapshotSerializers": ["enzyme-to-json/serializer"]
}
I would try adding "test": "jest --no-cache -w 2" to your package.json. Then run npm run test
I obtained already existing React project and I'm supposed to continue with it.I never used React before. I need to use web worker in the project - there's a project that suits my needs: Worker Loader
The suggest one adds this to their webpack.config.js:
module: {
rules: [
{
test: /\.worker\.js$/,
use: { loader: 'worker-loader' }
}
]
}
Then use worker like this:
import Worker from './file.worker.js';
const worker = new Worker();
But even though I can see that my React project uses webpack and babel o the background, there is no .babelrc or webpack.config.js in the project. This is how I run the project:
npm start
That actually runs react-scripts start based on what I see on package.json:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
Neither webpack nor babel are in package.json dependencies, so I really have no idea how are they run by React. I would really appreciate if someone explained to me how does it work and how to configure webpack to use worker loader.
You need to run npm run eject first.
This command will copy all of your configuration files into your project(including webpack.config.js). However, run this command only if you MUST because although you will have full control over your configuration, you'll be on your own. React won't manage the configuration for you anymore.
Not sure 100%, but I think this app was created using react starter kit called Create React App and it comes with a package called react-scripts which is a wrapper around the build tools -- webpack being one of them. So lookup that stuff in npm. It might be all taken care of for you
Also, see what you have under node_modules directory --i am guessing it's all there
I started working a lot with vue and started to use it in all the projects in the company where I work. And with that, I ended up creating some components, in general autocomplete, I know that there are many, I have already used some, but none have supplied all my needs. However, whenever I go to work on a new project and use the same component, either I recreates it, or I copy and paste it.
So I came to doubt How to create my component, upload to npmjs for whenever I use it, just give a npm install -save ..., and also be able to contribute a bit with the community.
update
With the release of vue-loader 15.x this answer will no longer work. Please use this instead https://medium.freecodecamp.org/how-to-create-a-vue-js-app-using-single-file-components-without-the-cli-7e73e5b8244f
Here is one way you can create/publish a Vuejs library/component from scratch.
As I am going to write down every step and command, make sure to follow the entire guide and you will be able to create and publish your own Vuejs component on NPM.
After you publish it, like most libraries you can install it using ex:
npm install --save your-component
And then import the component inside your app using
import something from 'your-component'
To start creating our first component, first create a folder called vuejs-hello-app (or any other name) and inside it, run:
npm init
Just hit enter until the interactive question ends and then npm will generate a file named package.json in that folder containing the following code.
(Note: I changed the description and version from 1.0.0 to 0.1.0 here is the result.)
{
"name": "vuejs-hello-app",
"version": "0.1.0",
"description": "vuejs library demo",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
After this, we'll need to install the dependencies for our library.
These dependencies are divided into two types: dependency and devDependency
dependency:
is the external library or libraries that our own component runs on. When someone installs your component, npm will make sure this dependency exists or gets installed first. Since we are creating a component for vue, we need to make sure vue is required. So, install it using:
npm install --save vue
devDependency:
is a bunch of libraries that we need only for development purposes. These libraries will help us build and/or transpile.
We install dev dependencies using the method above by adding the the suffix -dev to --save
Now, let us install the minimum dev dependencies we need for our component:
npm install --save-dev babel-core
npm install --save-dev babel-loader
npm install --save-dev babel-preset-env
npm install --save-dev cross-env
npm install --save-dev css-loader
npm install --save-dev file-loader
npm install --save-dev node-sass
npm install --save-dev sass-loader
npm install --save-dev vue-loader
npm install --save-dev vue-template-compiler
npm install --save-dev webpack
npm install --save-dev webpack-dev-server
At this point the libraries will be installed and the package.json will be updated to look like following.
{
"name": "vuejs-hello-app",
"version": "0.1.0",
"description": "vuejs library demo",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack -p"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.1",
"cross-env": "^5.1.1",
"css-loader": "^0.28.7",
"file-loader": "^1.1.5",
"node-sass": "^4.7.2",
"sass-loader": "^6.0.6",
"vue-loader": "^13.5.0",
"vue-template-compiler": "^2.5.9",
"webpack": "^3.10.0",
"webpack-dev-server": "^2.9.7"
},
"dependencies": {
"vue": "^2.5.9"
}
}
(note: I have added "build": "webpack -p" to build our lib with webpack)
Now, since our code needs to be built and transpiled, we need a folder to store the build version. Go ahead and create a folder inside our root folder and call it: dist and in the same place a configuration file for webpack and name it webpack.config.js
All of the files we have so far created are for configuring and stuff. For the actual app that people are going to use, we need to create at least two files inside our src/ directory.
A main.js and VuejsHelloApp.vue put them as:
./src/main.js and ./src/components/VuejsHelloApp.vue
I have mine structured like this:
dist
node_modules
src
main.js
components
VuejsHelloApp.vue
.babelrc
.eslintignore
.gitignore
.npmignore
.travis.yml
CONTRIBUTING
LICENSE
package.json
README.md
webpack.config.js
I will just go through the files listed and describe what each file does in-case anyone is curious:
/dist is where a build (transpiled), minified, non-ES6 version of your code will be stores
node_modules I think we know this already, let's ignore it
src/ this is root dir of your library.
.babelrc is where your babel options are kept, so add this to disable presets on modules
{
"presets": [
[
"env",
{
"modules": false
}
]
]
}
.eslintignore This is where you tell ESLINT to ignore linting so put this inside:
build/*.js
.gitignore
add files you want to ignore (from git)
.npmignore same as .gitignore for NPM
.travis.yml if you need CI check examples from travis and configure it
CONTRIBUTING not required
LICENSE not required
package.json ignore for now
README.md not required
webpack.config.js This is the important file that let's you create a build, browser compatible version of your code.
So, according to our app, here is a minimal example of what it should look like:
var path = require('path')
var webpack = require('webpack')
module.exports = {
entry: './src/main.js',
module: {
rules: [
// use babel-loader for js files
{ test: /\.js$/, use: 'babel-loader' },
// use vue-loader for .vue files
{ test: /\.vue$/, use: 'vue-loader' }
]
},
// default for pretty much every project
context: __dirname,
// specify your entry/main file
output: {
// specify your output directory...
path: path.resolve(__dirname, './dist'),
// and filename
filename: 'vuejs-hello-app.js'
}
}
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}
Note that the important directives here are entry and output. You can check webpack docs to learn more if you want to fully customize your app.
But basically, we're telling webpack to get the ./src/main.js (our app) and output it as ./dist/vuejs-hello-app.js
Now, we are almost finished setting up everything except the actual app.
Go to /src/components/VuejsHelloApp.vue and dump this simple app, which will move a button right or left when you hover on it
<template>
<div>
<button #mouseover='move($event)'> I'm alive </button>
</div>
</template>
<script>
export default {
data () {
return {}
},
methods: {
move (event) {
let pos = event.target.style.float;
if(pos === 'left'){
event.target.style.float = 'right'
}else{
event.target.style.float = 'left'
}
}
}
}
</script>
<style scoped>
</style>
And not but not least, got to ./src/main.js and export your app like:
import VuejsHelloApp from './components/VuejsHelloApp.vue'
export default VuejsHelloApp
Now go to your package.json file replace the "main: "index.js", with "main": "src/main.js",
After this, simply run these commands to build and publish your app:
npm run build
git add .
git commit -m "initial commit"
git push -u origin master
npm login
npm publish
Importing and using the library.
If everything went smoothly, then simply install your app like this:
npm install --save vuejs-hello-app
And use it in vue like this:
<template>
<div>
<VuejsHelloApp> </VuejsHelloApp>
</div>
</template>
<script>
import VuejsHelloApp from 'vuejs-hello-app'
export default {
name: 'HelloWorld',
components: { VuejsHelloApp }
}
</script>
I made this app https://github.com/samayo/vuejs-hello-app while writing the answer, it might help to better understand the code