I wanted to add Vue.js to my Spring Boot application. Even though everything seem to build fine, I cannot make vue component work.
Here is my simple component, MenuBar.vue:
<template>
<div>
Menu
</div>
</template>
<script>
export default {
name: "MenuBar"
}
</script>
And here is HTML which should be using it:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="https://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Dashboard</title>
</head>
<body>
<div id="vueApp">
<menu-bar></menu-bar>
</div>
<form th:action="#{/logout}" method="post">
<div><input type="submit" value="Log out"/></div>
</form>
</body>
</html>
Configuration files index.js:
import Vue from "vue";
import App from './App.vue'
Vue.config.devtools = true;
new Vue({
el: '#app',
template: '<App/>',
components: {App}
});
new Vue({
el: '#vueApp'
})
components.js:
import Vue from 'vue';
import MenuBar from "./components/MenuBar";
Vue.component('menu-bar', MenuBar);
And webpack config file:
// webpack.config.js
const {VueLoaderPlugin} = require('vue-loader');
const path = require('path');
module.exports = {
mode: 'development',
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.js$/,
loader: 'babel-loader'
},
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
]
}
]
},
entry: {
main: path.resolve(__dirname, './src/index.js')
},
resolve: {
extensions: ['.vue', '.js'],
alias: {
'components': path.resolve(__dirname, './src/components/')
}
},
plugins: [
// make sure to include the plugin for the magic
new VueLoaderPlugin()
],
devServer: {
hot: false,
liveReload: true,
proxy: {
"*": {
target: 'http://localhost:8080',
ignorePath: false,
changeOrigin: false,
secure: false
}
},
port: 8081,
host: "0.0.0.0"
},
output: {
publicPath: '/dist/',
path: path.resolve(__dirname, './src/main/resources/static/dist')
}
}
When I build npm and run application page contains element <menu-bar></menu-bar> but does not load its content. What could be an issue here?
The problem is that you add the component inside of <div id="vueApp"> at:
<div id="vueApp">
<menu-bar></menu-bar>
</div>
In this case, your app renders inside of this <div id="vueApp"> tag. Everything you write inside of this tag at your html file, will be overwritten.
You have another file named App.vue. You should add your MenuBar.vue component to this main component and it should show.
EDIT: Easiest attempt to get your component to work
This ist the main.js:
import { createApp } from 'vue'
import App from './App.vue'
// Create app
const app = createApp(App);
// Import component
import MenuBar from "./components/MenuBar";
// Use MenuBar
app.component('MenuBar', MenuBar);
// Mount app
app.mount('#app')
This is the App.vue:
<template>
<div>
<MenuBar></MenuBar>
Body
</div>
</template>
<script>
export default {
name: 'App',
}
</script>
This is the MenuBar.vue:
<template>
<div>
Menu
</div>
</template>
<script>
export default {
name: "MenuBar"
}
</script>
As we have a slight different approach I will also give you the package.json, so you can just hit npm install and it should implement all the (few) packages includet in this app:
{
"name": "q68966956",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.6.5",
"vue": "^3.0.0"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"#vue/compiler-sfc": "^3.0.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
It looks like you are in a early stage with your project, so maybe you can start with a stable base from that code. Let me know, if it helped you.
Related
I'm a newbie to Vue.js and first time dealing with vue-router.
Just created a few files and for some reason I don't get to see the template. Compiled successfully but in the browser I get the following error: Failed to resolve component: router-view
main.js
import { createApp } from 'vue';
import VueRouter from 'vue-router';
import { store } from './store';
import App from './App.vue';
import AuthHandler from './components/AuthHandler';
const router = new VueRouter({
mode: 'history',
routes: [
{ path: '/oauth2/callback', component: AuthHandler }
]
});
const app = createApp(App)
app.use(router)
app.use(store)
app.mount('#app')
App.vue
<template>
<div>
<AppHeader></AppHeader>
<router-view></router-view>
</div>
</template>
<script>
import AppHeader from "./components/AppHeader";
export default {
name: "App",
components: {
AppHeader
}
};
</script>
components/AuthHandler.vue
<template>
<div>
... Please wait
</div>
</template>
<script>
export default {
name: "AuthHandler"
};
</script>
Here is the package.json
package.json
{
"name": "images",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"axios": "^0.21.1",
"core-js": "^3.6.5",
"lodash": "^4.17.21",
"qs": "^6.10.1",
"vue": "^3.0.0",
"vue-router": "^3.5.2",
"vuex": "^4.0.2"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"#vue/compiler-sfc": "^3.0.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
I resolved the problem in the following way. I believe the issue relay on the vue/vue-router versions. I hope this is the correct way :-)
main.js
import { createApp } from 'vue';
import App from './App.vue';
// import VueRouter from './vue-router';
import { createWebHistory, createRouter } from "vue-router";
import { store } from './store';
import AuthHandler from './components/AuthHandler';
const router = createRouter({
history: createWebHistory(),
routes: [
{ path: '/about', component: AuthHandler }
]
});
const app = createApp(App)
app.use(router)
app.use(store)
app.mount('#app')
I was an idiot, I wanted to use 'vue add vue-router'. Of course it didn't work.
Vue add router
is the command.
npm install vue-router#4
only installs the package, won't add it to the app. If all is well, main.js should look like this:
import App from "./App.vue";
import router from "./router";
createApp(App).use(router).mount("#app");
Unfortunately they forgot to add it to the documentation...
I've setup a small webpack project which creates a Vue app bundle which is included in a static HTML file where the app is injected. I want to have components written in Typescript so I've included ts-loader in the webapck configuration. The build process - using the "webpack" command - works ok, but I'm having some trouble when I use webpack-dev-server.
When I initially start the server, everything works fine: the bundle is created and served on my local server and the browser displays the app correcly. However, when I make a change in the source code and save, I get a Typescript error when the code is recompiled telling me that a module or declaraton is missing for the ".vue" file for my component:
TS2307: Cannot find module './components/Banner.vue' or its corresponding type declarations.
To start the server I use the following command:
webpack serve --open
Project's folder structure
=======
webpack.config.js
const { VueLoaderPlugin } = require('vue-loader')
const path = require('path')
module.exports = {
mode: 'development',
devtool: 'inline-source-map',
entry: {
app: './src/app.js',
},
output: {
filename: '[name].bundle.js',
},
plugins: [
new VueLoaderPlugin(),
],
devServer: {
contentBase: path.join(__dirname, 'dist'),
},
module: {
rules: [
{
test: /\.vue$/,
use: ['vue-loader']
},
{
test: /\.ts$/,
loader: 'ts-loader',
exclude: [/node_modules/],
options: { appendTsSuffixTo: [/\.vue$/] }
},
],
},
}
app.js
import Vue from 'vue'
import App from './App.vue'
const app = new Vue({
render: (h) => h(App)
})
app.$mount('#app')
App.vue
<template>
<div id="app">
<h1>{{ welcomeMessage }}</h1>
<Banner />
</div>
</template>
<script lang="ts">
import Vue from 'vue'
import Banner from './components/Banner.vue'
export default Vue.extend({
components: {
Banner,
},
data: () => ({
welcomeMessage: 'Hello world!'
})
})
</script>
tsconfig.json
{
"compilerOptions": {
"target": "es5",
"strict": true,
"module": "es2015",
"moduleResolution": "node"
}
}
#types/vue-shims.d.ts
declare module "*.vue" {
import Vue from 'vue'
export default Vue
}
package.json
{
"name": "2021-06-21-webpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack",
"dev": "webpack serve --open"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"ts-loader": "^8.3.0",
"typescript": "^4.3.4",
"vue-loader": "^15.9.7",
"vue-template-compiler": "^2.6.14",
"webpack": "^4.46.0",
"webpack-cli": "^4.7.2",
"webpack-dev-server": "^3.11.2"
},
"dependencies": {
"vue": "^2.6.14"
}
}
I'm trying to import an external component into my Nuxt project and it keeps saying the component is not registered. I've tried so many things from Google and i'm honestly a bit lost on the issue. Any help is much appreciated!
package.json
{
"name": "hjemmeside",
"version": "1.0.0",
"private": true,
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate"
},
"dependencies": {
"#nuxtjs/style-resources": "^1.1.0",
"bootstrap": "^4.6.0",
"bootstrap-vue": "^2.21.2",
"core-js": "^3.9.1",
"node-sass": "^6.0.0",
"nuxt": "^2.15.3",
"sass-loader": "^10",
"vue-terminal-ui": "^0.1.6"
},
"devDependencies": {
"webpack": "^4.46.0"
}
}
nuxt.config.js
export default {
// Global page headers: https://go.nuxtjs.dev/config-head
head: {
title: "hjemmeside",
htmlAttrs: {
lang: "en"
},
meta: [
{ charset: "utf-8" },
{ name: "viewport", content: "width=device-width, initial-scale=1" },
{ hid: "description", name: "description", content: "" }
],
link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }]
},
// Global CSS: https://go.nuxtjs.dev/config-css
css: ["#/assets/custom.scss"],
// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: ["~/plugins/Terminal.client.js"],
// Auto import components: https://go.nuxtjs.dev/config-components
components: true,
// Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
buildModules: [],
rules: [
{
test: /\.s[ac]ss$/i,
use: ["style-loader", "css-loader", "sass-loader"]
}
],
// Modules: https://go.nuxtjs.dev/config-modules
modules: ["bootstrap-vue/nuxt"],
bootstrapVue: {
bootstrapCSS: false,
bootstrapVueCSS: false
},
// Build Configuration: https://go.nuxtjs.dev/config-build
build: {
transpile: ["Terminal"]
}
};
plugins/Terminal.client.js
import Vue from "vue";
import VueTerminal from "vue-terminal-ui";
Vue.use(VueTerminal);
component/Hero.vue (Where i'm trying to use the component)
<template>
<client-only>
<VueTerminal
intro="intro"
console-sign="$"
allow-arbitrary
height="500px"
#command="onCliCommand"
></VueTerminal>
</client-only>
</template>
<script>
export default {
methods: {
onCliCommand(data, resolve, reject) {
// typed command is available in data.text
// don't forget to resolve or reject the Promise
setTimeout(() => {
resolve('')
}, 300)
},
},
}
</script>
<style lang="sass">
</style>
You can either make a component available globally or import it in the component where you want to use it:
If you want to make the component available globally you should use this in your plugin:
import Vue from "vue";
import VueTerminal from "vue-terminal-ui";
Vue.component('vue-terminal', VueTerminal)
You can read about it here.
If you want to import it locally using the options API, you import it in your component and declare it in the components option:
<script>
import VueTerminal from 'vue-terminal-ui';
export default {
components: {
VueTerminal,
},
};
</script>
If you want to import it locally using the composition API:
<script setup>
import VueTerminal from 'vue-terminal-ui';
</script>
Also it is recommended to use kebab-case for components, when declaring them in the template. Since HTML isn't case sensitive. You can read about this in the Vue Style Guide
Update: The Vue 3 documentation says kebab-case is not longer the recommended component casing.
It is a simple fix
first import the component in this case VueTerminal
and then add another field or option to export
like this
export default {
components: {
VueTerminal
},
// other code
}
I created a vue 3 project using Vue cli. I am using a webpack config to manage my build. When I point my vue bundle to vue.runtime.esm-browser.js, then I get a warning in browser console. "[Vue warn]: Component provided template option but runtime compilation is not supported in this build of Vue. Use "vue.esm-browser.js" instead."
When I checked the docs, it was mentioned as "vue-loader" plugin converts the html template to render functions. Looks like I am missing something which is needed to webpack.
Entry file : main.js
import { createApp } from "vue";
import corecomponentA from "../core/components/corecomponentA.vue";
createApp({
components: {
"core-component-a": corecomponentA,
},
}).mount("#app");
Webpack.config.js
var path = require("path");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const { VueLoaderPlugin } = require("vue-loader");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
.BundleAnalyzerPlugin;
const WebpackBar = require("webpackbar");
module.exports = (env, options) => {
const devMode = options.mode != "production";
return {
entry: {
"vue-bundle-store": "./src/entry/main.js",
},
output: {
path: path.resolve(
__dirname,
"./../ui.clientlibs/src/js/"
),
filename: "[name].js",
chunkFilename: "[name].js",
publicPath: process.env.BASE_URL,
},
module: {
rules: [
{
enforce: "pre",
test: /\.js$/,
exclude: /node_modules/,
loader: "eslint-loader",
},
{
test: /\.vue$/,
loader: "vue-loader",
},
{
test: /\.js$/,
loader: "babel-loader",
exclude: "/node_modules/",
query: {
presets: ["#babel/preset-env"],
},
},
{
test: /\.ts$/,
exclude: /node_modules/,
use: [
{
loader: "babel-loader",
options: { babelrc: true },
},
{
loader: "ts-loader",
options: { appendTsSuffixTo: [/\.vue$/] },
},
],
},
],
},
stats: {
colors: true,
},
optimization: {
splitChunks: {
cacheGroups: {
commons: {
test: /[\\/]node_modules[\\/]/,
name: "vendor-bundle",
chunks: "all",
},
},
},
minimizer: !devMode
? [
new UglifyJsPlugin({
sourceMap: false,
uglifyOptions: {
chunkFilter: (chunk) => {
if (chunk.name === "vendor-bundle") {
return false;
}
return true;
},
compress: {
drop_console: true,
},
mangle: {
reserved: ["vueIns", "args", "el"],
},
},
}),
]
: [],
},
devtool: "source-map",
plugins: [
new CleanWebpackPlugin(),
new VueLoaderPlugin(),
new WebpackBar(),
new BundleAnalyzerPlugin({
analyzerPort: 4000,
openAnalyzer: false,
analyzerMode: "static",
}),
] ,
resolve: {
extensions: [".ts", ".js", ".vue", ".json"],
alias: {
vue: devMode ? "vue/dist/vue.runtime.esm-browser.js" : "vue/dist/vue.runtime.esm-browser.prod.js"
}
}
};
};
coreComponentA.vue
<script lang="ts">
import { h, ref, reactive } from "vue";
export default {
setup() {
const str = ref("Core component B");
const object = reactive({ foo: "bar" });
return () => h("div", [str.value, object.foo]);
}
};
</script>
package.json
{
"name": "vue3.test",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"test:unit": "vue-cli-service test:unit",
"lint": "vue-cli-service lint",
"analyze-bundle": "webpack-bundle-analyzer stats.json",
"bundle": "webpack --mode=production --env.production --config webpack.config.js",
"bundle-dev": "webpack --mode=development --env.production=false --config webpack.config.js",
"stats": "webpack --mode=production --env.production --config webpack.config.js --profile --json > stats.json"
},
"dependencies": {
"vue": "^3.0.2"
},
"devDependencies": {
"#types/jest": "^24.0.19",
"#typescript-eslint/eslint-plugin": "^2.33.0",
"#typescript-eslint/parser": "^2.33.0",
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-plugin-typescript": "~4.5.0",
"#vue/cli-plugin-unit-jest": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"#vue/compiler-sfc": "^3.0.2",
"#vue/eslint-config-prettier": "^6.0.0",
"#vue/eslint-config-typescript": "^5.0.2",
"#vue/test-utils": "^2.0.0-0",
"clean-webpack-plugin": "^3.0.0",
"core-js": "^3.6.5",
"eslint": "^6.7.2",
"eslint-plugin-prettier": "^3.1.3",
"eslint-plugin-vue": "^7.0.0-0",
"html-webpack-plugin": "^3.2.0",
"prettier": "^1.19.1",
"typescript": "~3.9.3",
"uglifyjs-webpack-plugin": "^2.2.0",
"vue-jest": "^5.0.0-0",
"vue-loader": "^16.0.0-beta.8",
"webpack-cli": "^3.3.10",
"webpackbar": "^4.0.0"
}
}
babel.config.js
module.exports = {
ignore: [/\/core-js/],
presets: [
[
"#babel/preset-env",
{ modules: false, useBuiltIns: "usage", corejs: "3.6.5" },
],
],
overrides: [
{
test: "./node_modules",
sourceType: "unambiguous",
},
],
};
Usage of my component in a html file
<div id="app">
<core-component-a></core-component-a>
</div>
The component is not rendered in browser. Instead the below message is displayed.
VM211871:1 [Vue warn]: Component provided template option but runtime compilation is not supported in this build of Vue. Use "vue.esm-browser.js" instead.
at <App>
vue-loader converts the html template to render function only in SFC's (Sinle File Components) - .vue files (as you can tell from vue rule in Webpack config) - and only templates provided in <template></template> block of SFC
But you have a template in your HTML file - content of <div id="app"> is essentially Vue template. Runtime + Compiler vs. Runtime-only
Docs vue.esm-bundler.js: includes the runtime compiler. Use this if you are using a bundler but still want runtime template compilation (e.g. in-DOM templates or templates via inline JavaScript strings - component template option).
Also if you using Webpack, you should use "bundler" version of Vue
Webpack.config.js
alias: {
vue: "vue/dist/vue.esm-bundler.js"
}
...you don't need to switch minified/dev bundle because Webpack will (when configured correctly) optimize Vue code same way as your own code..
Also, pay attention to this sentence in the docs: Leaves prod/dev branches with process.env.NODE_ENV guards (must be replaced by bundler)
NODE_ENV is conventionally used to define the environment type and is used by Vue to decide what code to include...
Note
I don't really understand why are You using your own Webpack config for project created with Vue CLI when whole point of Vue CLI is to manage webpack config for you and offers plenty of options to customize it...doesn't make any sense
If you are using Vite, add the alias 'vue': 'vue/dist/vue.esm-bundler' to vite.config.js
import { defineConfig } from 'vite'
import vue from '#vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'vue': 'vue/dist/vue.esm-bundler',
},
}
})
you just have to replace on Webpack.config.js
alias: {
vue: devMode ? "vue/dist/vue.runtime.esm-browser.js" : "vue/dist/vue.runtime.esm-browser.prod.js"
}
With
vue: "vue/dist/vue.esm-bundler.js"
This works for me.
I created a fresh new install of vue.js using "vue create todo --default" command. After that I installed lodash too with this command "npm i --save lodash". I can see it in my package.json on the "dependencies" object. The problem is that when I import it on my main.js and use the lodash functions, it is showing the error "_ is not defined". So I tried importing it inside the App.vue. The error "_ is not defined" was removed but it is not working.
Here are the code inside the App.vue, main.js, and package.json
main.js
import Vue from 'vue'
import App from './App.vue'
import "bootstrap/dist/css/bootstrap.min.css";
import "jquery/dist/jquery";
import "bootstrap/dist/js/bootstrap.min";
import _ from "lodash";
Vue.prototype._ = _;
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
App.vue
<template>
<div id="app">
<h4 class="bg-primary text-white text-center p-2">
{{name}}'s' To Do List
</h4>
<div class="container-fluid p-4">
<div class="row">
<div class="col font-weight-bold">Task</div>
<div class="col-2 font-weight-bold">Done</div>
</div>
<div class="row" v-for="t in completedtask" v-bind:key="t.action">
<div class="col">{{t.action}}</div>
<div class="col-2">
<input type="checkbox" v-model="t.done" class="form-check-input">
{{t.done}}
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data(){
return{
name: "Welly",
tasks: [{
action: "Buy Flowers",
done: false
},
{
action: "Get Shoes",
done: false
},
{
action: "Collect Tickets",
done: true
},
{
action: "Call Joe",
done: false
}
]
};
},
computed: {
hidecompletedtask(){
return _.map(this.tasks,(val)=>{
return !val.done;
});
}
}
}
</script>
<style>
</style>
package.json
{
"name": "todo",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"bootstrap": "^4.4.1",
"core-js": "^3.4.4",
"jquery": "^3.4.1",
"lodash": "^4.17.15",
"popper.js": "^1.16.1",
"vue": "^2.6.10"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^4.1.0",
"#vue/cli-plugin-eslint": "^4.1.0",
"#vue/cli-service": "^4.1.0",
"babel-eslint": "^10.0.3",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"vue-template-compiler": "^2.6.10"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {},
"parserOptions": {
"parser": "babel-eslint"
}
},
"browserslist": [
"> 1%",
"last 2 versions"
]
}
You'll still need to access the prototype via the this context, like this._.map().
computed: {
hidecompletedtask() {
return this._.map(this.tasks, (val) => {
return !val.done;
});
}
}
Reference: Adding Instance Properties.
Alternatively, you could extend the global window object. Put the following line in your main.js (or some booting file).
window._ = require('lodash');
Somewhere else where you need the library:
computed: {
hidecompletedtask() {
// The underscore (_) character now refers to the `window._ object`
// so you can drop the `this`.
return _.map(this.tasks, (val) => {
return !val.done;
});
}
}
You can also use vue-lodash package -- Follow these steps:
npm install --save vue-lodash
in main.js -- import VueLodash from 'vue-lodash'
in main.js after import -- Vue.use(VueLodash)
Usage:
Vue._.random(20);
this._.random(20);
-------- OR ------------
In your main.js add this line of code:
window._ = require('lodash');
That way it will work without Vue or this:
Just do -- _.map()
You can import lodash in your main.js file by javascript window object like this:
window._ = require('lodash');
Then use it anywhere in your projet like this:
var original = [
{ label: 'private', value: 'private#johndoe.com' },
{ label: 'work', value: 'work#johndoe.com' }
];
var update = [
{ label: 'private', value: 'me#johndoe.com' },
{ label: 'school', value: 'schol#johndoe.com' }
];
var result = _.unionBy(update, original);
var sortedresult = _map(_.sortBy(result, 'label'));
console.log(sortedresult);
I just use lodash unionBy and sortBy method for example.