59 | 
61 |
121 |
126 |
135 |
136 |
137 |
138 |
139 |
140 |
141 |
142 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "vuidget",
3 | "version": "0.1.0",
4 | "private": true,
5 | "scripts": {
6 | "serve": "vue-cli-service serve",
7 | "build": "vue-cli-service build",
8 | "lint": "vue-cli-service lint"
9 | },
10 | "dependencies": {
11 | "at-ui": "^1.3.3",
12 | "at-ui-style": "^1.5.1",
13 | "document-register-element": "^1.11.0",
14 | "lodash": "^4.17.13",
15 | "moment": "^2.22.2",
16 | "vue": "^2.5.16",
17 | "vue-custom-element": "^3.2.2",
18 | "vue-router": "^3.0.1",
19 | "vuex": "^3.0.1",
20 | "webpack": "^4.16.1"
21 | },
22 | "devDependencies": {
23 | "@vue/cli-plugin-babel": "^3.4.1",
24 | "@vue/cli-plugin-eslint": "^3.4.1",
25 | "@vue/cli-service": "^3.5.3",
26 | "@vue/eslint-config-standard": "^3.0.0-rc.5",
27 | "node-sass": "^4.11.0",
28 | "sass-loader": "^7.0.3",
29 | "vue-template-compiler": "^2.5.16"
30 | },
31 | "eslintConfig": {
32 | "root": true,
33 | "env": {
34 | "node": true
35 | },
36 | "extends": [
37 | "plugin:vue/essential",
38 | "@vue/standard"
39 | ],
40 | "rules": {},
41 | "parserOptions": {
42 | "parser": "babel-eslint"
43 | }
44 | },
45 | "postcss": {
46 | "plugins": {
47 | "autoprefixer": {}
48 | }
49 | },
50 | "browserslist": [
51 | "> 1%",
52 | "last 2 versions",
53 | "not ie <= 8"
54 | ]
55 | }
56 |
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
61 | 62 | Vuidget 63 |
64 |
65 |
120 |
66 |
71 |
78 |
100 | 67 | This project is dedicated to all Vue.js developers who tried to embed their application as an external widget 68 | and failed, or to those who wish to do so but lack the resources. 69 |
70 |71 |
72 | It shows how to use advanced Vue.js application as an embeddable HTML widget - meaning an app 73 | that contains store, routes, actions, mutations, socket, i18n - simply whatever you choose. Anything 74 | used in a traditional 75 | single-page application can be used the same way here. 76 |
77 |78 |
Example of a code in main.js
79 |Before widget setup
80 |new Vue({
81 | sockets: sockets,
82 | i18n: i18n.init(lang, translations, CONST.FALLBACK_LOCALE),
83 | el: '#app',
84 | render: h => h(App),
85 | store,
86 | router
87 | })
88 |
89 | After widget setup
90 |App.sockets = sockets
91 | App.i18n = i18n.init(lang, translations, CONST.FALLBACK_LOCALE)
92 | App.router = router
93 | App.store = store
94 | Vue.customElement('my-widget', App)
95 |
96 |
97 | Notice that we are not using new Vue() anymore.
98 |
99 |
101 |
103 |
104 |
118 |
119 | 103 |
104 |
105 | <link href="https://vuidget-source.danajanoskova.sk/css/app.css" rel=stylesheet/>
106 |
107 |
108 |
109 |
110 | <vue-widget title="Vuidget live example"></vue-widget>
111 |
112 |
113 |
114 |
115 | <script src="https://vuidget-source.danajanoskova.sk/js/app.js"></script>
116 |
117 |
118 | 121 |
The source code is available at GitHub - 122 | 123 | https://github.com/DJanoskova/Vuidget 124 |
125 |126 |
127 | None of this would be possible without 128 | https://github.com/karol-f/vue-custom-element 129 | created by karol-f 130 |
131 | Vue-custom-element is a tiny wrapper around Vue components. It provide seamless way to use it in HTML, plain 132 | JavaScript, Vue, React, Angular etc., without manually initialising Vue. It's using power of Web Components' Custom 133 | Elements. 134 |135 |
3 |
4 |
7 |
8 |
9 | List
10 |
11 |
12 |
13 | Add new
14 |
15 |
16 |
17 |
19 |
20 |
21 |
44 |
--------------------------------------------------------------------------------
/src/assets/css/main.scss:
--------------------------------------------------------------------------------
1 | #app {
2 | padding: 20px;
3 | }
4 |
5 | .at-btn + .at-btn {
6 | margin-left: 0.5rem;
7 | }
8 |
--------------------------------------------------------------------------------
/src/assets/img/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DJanoskova/Vuidget/7bf30d49b0245cc9bca9870939ef0326828e0808/src/assets/img/logo.png
--------------------------------------------------------------------------------
/src/components/UI/Todo.vue:
--------------------------------------------------------------------------------
1 |
2 | {{ $root.title }}
5 | 6 |17 |
{{ data.title }}
4 | 5 |
16 | {{ data.text }}
17 |
18 |
3 |
7 |
8 |
9 |
24 |
--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
1 | const webpack = require('webpack')
2 | module.exports = {
3 | configureWebpack: {
4 | plugins: [
5 | new webpack.optimize.LimitChunkCountPlugin({
6 | maxChunks: 1
7 | })
8 | ]
9 | },
10 | chainWebpack:
11 | config => {
12 | config.optimization.delete('splitChunks')
13 | },
14 | filenameHashing: false
15 | }
16 |
--------------------------------------------------------------------------------