{"id":20495316,"url":"https://github.com/jualoppaz/single-spa-layout-app","last_synced_at":"2025-04-13T17:43:43.748Z","repository":{"id":40886360,"uuid":"234129266","full_name":"jualoppaz/single-spa-layout-app","owner":"jualoppaz","description":"Vue application with topbar and sidebar menus for be included in a single-spa application as registered app.","archived":false,"fork":false,"pushed_at":"2023-01-06T02:28:13.000Z","size":2735,"stargazers_count":4,"open_issues_count":21,"forks_count":7,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-04-14T12:42:42.873Z","etag":null,"topics":["bootstrap","bootstrap-vue","sidebar","single-spa","single-spa-demo","single-spa-vue","topbar","vue","vuejs","webpack"],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jualoppaz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-01-15T16:59:35.000Z","updated_at":"2024-04-12T05:45:40.000Z","dependencies_parsed_at":"2023-02-05T03:01:58.674Z","dependency_job_id":null,"html_url":"https://github.com/jualoppaz/single-spa-layout-app","commit_stats":null,"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jualoppaz%2Fsingle-spa-layout-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jualoppaz%2Fsingle-spa-layout-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jualoppaz%2Fsingle-spa-layout-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jualoppaz%2Fsingle-spa-layout-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jualoppaz","download_url":"https://codeload.github.com/jualoppaz/single-spa-layout-app/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248756518,"owners_count":21156782,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bootstrap","bootstrap-vue","sidebar","single-spa","single-spa-demo","single-spa-vue","topbar","vue","vuejs","webpack"],"created_at":"2024-11-15T17:45:26.205Z","updated_at":"2025-04-13T17:43:43.715Z","avatar_url":"https://github.com/jualoppaz.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp float=\"left\"\u003e\n  \u003cimg src=\"https://single-spa.js.org/img/logo-white-bgblue.svg\" width=\"50\" height=\"50\"\u003e\n  \u003cimg src=\"https://vuejs.org/images/logo.png\" width=\"50\" height=\"50\"\u003e\n\u003c/p\u003e\n\n[![npm version](https://img.shields.io/npm/v/single-spa-layout-app.svg?style=flat-square)](https://www.npmjs.org/package/single-spa-layout-app)\n\n# single-spa-layout-app\n\nThis is a Vue application example used as NPM package in [single-spa-login-example-with-npm-packages](https://github.com/jualoppaz/single-spa-login-example-with-npm-packages) in order to register an application. See the installation instructions there.\n\n## ✍🏻 Motivation\n\nThis is a vue application built as library which only contains the navbar and sidebar menus displayed after the user performs the required login.\n\n## How it works ❓\n\nThere are several files for the right working of this application and they are:\n\n- src/singleSpaEntry.js\n- package.json\n- vue.config.js\n\n### src/singleSpaEntry.js\n\n```javascript\n/* eslint-disable import/no-unresolved */\nimport Vue from 'vue';\nimport singleSpaVue from 'single-spa-vue';\n\nimport { BootstrapVue } from 'bootstrap-vue';\nimport { library } from '@fortawesome/fontawesome-svg-core';\nimport { faGithub } from '@fortawesome/free-brands-svg-icons';\nimport { faHome } from '@fortawesome/free-solid-svg-icons';\nimport { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';\n\nimport App from './App.vue';\n\nlibrary.add(faGithub);\nlibrary.add(faHome);\n\nVue.component('font-awesome-icon', FontAwesomeIcon);\n\nVue.use(BootstrapVue);\n\nVue.config.productionTip = false;\n\nconst vueLifecycles = singleSpaVue({\n  Vue,\n  appOptions: {\n    el: '#layout-app',\n    render: (h) =\u003e h(App),\n  },\n});\n\nexport const { bootstrap } = vueLifecycles;\nexport const { mount } = vueLifecycles;\nexport const { unmount } = vueLifecycles;\n```\n\nThe **eslint** comments are indicated due to **webpack external** dependencies. Without the **eslint** comments the build process will fail.\\\nThe **vueLifecycles** object contains all **single-spa-vue** methods for the **single-spa** lifecycle of this app. All used config is default one but the custom config of the **el** option. It's assumed that an element with **layout-app** id is defined in the **index.html** where this application will be mounted.\n\n### package.json\n\n```json\n{\n  \"name\": \"single-spa-layout-app\",\n  \"version\": \"0.2.5\",\n  \"description\": \"Vue application with header, navbar and footer for be included in a single-spa application as registered app.\",\n  \"main\": \"dist/single-spa-layout-app.umd.js\",\n  \"scripts\": {\n    \"build\": \"vue-cli-service build --target lib --formats umd --name single-spa-layout-app src/singleSpaEntry.js\",\n    \"lint\": \"vue-cli-service lint\"\n  },\n  \"devDependencies\": {\n    \"@vue/cli-plugin-babel\": \"4.1.0\",\n    \"@vue/cli-plugin-eslint\": \"4.1.0\",\n    \"@vue/cli-service\": \"4.1.0\",\n    \"babel-eslint\": \"10.0.3\",\n    \"core-js\": \"3.4.4\",\n    \"eslint\": \"5.16.0\",\n    \"eslint-config-airbnb-base\": \"14.0.0\",\n    \"eslint-plugin-import\": \"2.20.0\",\n    \"eslint-plugin-vue\": \"5.0.0\",\n    \"sass\": \"1.24.4\",\n    \"sass-loader\": \"8.0.2\",\n    \"vue-cli-plugin-single-spa\": \"1.1.0\",\n    \"vue-template-compiler\": \"2.6.11\",\n    \"webpack\": \"4.41.5\"\n  },\n  \"browserslist\": [\n    \"\u003e 1%\",\n    \"last 2 versions\"\n  ],\n  \"license\": \"MIT\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/jualoppaz/single-spa-layout-app.git\"\n  },\n  \"keywords\": [\n    \"single-spa\",\n    \"login\",\n    \"npm\",\n    \"bootstrap\",\n    \"bootstrap-vue\",\n    \"webpack\"\n  ],\n  \"author\": \"Juan Manuel López Pazos\",\n  \"bugs\": {\n    \"url\": \"https://github.com/jualoppaz/single-spa-layout-app/issues\"\n  },\n  \"homepage\": \"https://github.com/jualoppaz/single-spa-layout-app#readme\"\n}\n```\n\nThere are only two scripts in this project:\n\n- **build**: for compile the application and build it as a **libray** in **umd** format\n- **lint**: for run **eslint** in all project\n\nThere are only **devDependencies** because the application dependencies are defined as **webpack externals**.\n\n### vue.config.js\n\n```javascript\nconst path = require('path');\nconst webpack = require('webpack');\n\nmodule.exports = {\n  devServer: {\n    writeToDisk: true,\n  },\n  configureWebpack: {\n    output: {\n      library: 'single-spa-layout-app',\n      libraryTarget: 'umd',\n      filename: 'single-spa-layout-app.js',\n      path: path.resolve(__dirname, 'dist'),\n    },\n    plugins: [\n      new webpack.optimize.LimitChunkCountPlugin({\n        maxChunks: 1,\n      }),\n    ],\n  },\n  chainWebpack: (config) =\u003e {\n    config.externals([\n      '@fortawesome/fontawesome-svg-core',\n      '@fortawesome/free-brands-svg-icons',\n      '@fortawesome/free-solid-svg-icons',\n      '@fortawesome/vue-fontawesome',\n      'bootstrap',\n      'bootstrap-vue',\n      'single-spa-vue',\n      'vue',\n    ]);\n  },\n};\n```\n\nThe needed options for the right build of the application as library are defined in the **configureWebpack.output** field.\\\nThe **LimitChunkCountPlugin** is used for disable chunks for build process. It's not necessary but I prefer keep whole application in one chunk as it will be embedded in another one.\\\nFinally, in the **chainWebpack** field all common dependencies between **single spa** registered apps are defined as **externals**. In that way, all **single spa** registered apps will use the same dependencies and they will be imported only in the root project. \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjualoppaz%2Fsingle-spa-layout-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjualoppaz%2Fsingle-spa-layout-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjualoppaz%2Fsingle-spa-layout-app/lists"}