Manage Mastodon boosts

28 |

29 | 30 |

31 | 32 |

Loaded {{ids.length}} of {{following_count}} people you follow

33 | 34 | 35 | 36 | 37 | 40 | 45 | 50 | 54 | 55 |

38 | 39 |

41 | 42 | {{user.display_name || user.username}} 43 | 44 |

46 | 47 | 48 | 49 |

51 | 52 | 53 |

56 | 57 |

58 |

59 | 60 | 61 |

62 | 63 | {{relationships[current_account].username}} 64 | 65 | 66 |

67 |

68 | No toots to show. 69 |

70 |

71 |

72 |

73 | 74 |

75 |

76 |

77 |

78 |

79 |

80 |

81 |

82 |

83 |

84 |

85 |

88 |

89 | Hello! This is a tool to quickly turn boosts on/off for people you follow on Mastodon. 90 |

91 | 92 |

Login with Mastodon

93 | 94 |

95 | What's your Mastodon instance? 96 |

97 | 98 | 102 |

103 | Made by Julia Evans (@b0rk). Source on GitHub. 104 |

105 |

`,Ga.children[0].getAttribute("foo")):(Ga.innerHTML=e,Ga.textContent)},isBuiltInComponent:e=>Al(e,"Transition")?Wa:Al(e,"TransitionGroup")?za:void 0,getNamespace(e,t){let n=t?t.ns:0;if(t&&2===n)if("annotation-xml"===t.tag){if("svg"===e)return 1;t.props.some((e=>6===e.type&&"encoding"===e.name&&null!=e.value&&("text/html"===e.value.content||"application/xhtml+xml"===e.value.content)))&&(n=0)}else/^m(?:[ions]|text)$/.test(t.tag)&&"mglyph"!==e&&"malignmark"!==e&&(n=0);else t&&1===n&&("foreignObject"!==t.tag&&"desc"!==t.tag&&"title"!==t.tag||(n=0));if(0===n){if("svg"===e)return 1;if("math"===e)return 2}return n},getTextMode({tag:e,ns:t}){if(0===t){if("textarea"===e||"title"===e)return 1;if(qa(e))return 2}return 0}},Ya=(e,t)=>{const n=c(e);return Nl(JSON.stringify(n),!1,t,3)};const Za=t("passive,once,capture"),Qa=t("stop,prevent,self,ctrl,shift,alt,meta,exact,middle"),Xa=t("left,right"),eu=t("onkeyup,onkeydown,onkeypress",!0),tu=(e,t)=>Rl(e)&&"onclick"===e.content.toLowerCase()?Nl(t,!0):4!==e.type?El(["(",e,`) === "onClick" ? "${t}" : (`,e,")"]):e,nu=(e,t)=>{1!==e.type||0!==e.tagType||"script"!==e.tag&&"style"!==e.tag||t.removeNode()},ou=[e=>{1===e.type&&e.props.forEach(((t,n)=>{6===t.type&&"style"===t.name&&t.value&&(e.props[n]={type:7,name:"bind",arg:Nl("style",!0,t.loc),exp:Ya(t.value.content,t.loc),modifiers:[],loc:t.loc})}))}],ru={cloak:()=>({props:[]}),html:(e,t,n)=>{const{exp:o,loc:r}=e;return t.children.length&&(t.children.length=0),{props:[Tl(Nl("innerHTML",!0,r),o||Nl("",!0))]}},text:(e,t,n)=>{const{exp:o,loc:r}=e;return t.children.length&&(t.children.length=0),{props:[Tl(Nl("textContent",!0),o?Ac(o,n)>0?o:$l(n.helperString(ol),[o],r):Nl("",!0))]}},model:(e,t,n)=>{const o=Fa(e,t,n);if(!o.props.length||1===t.tagType)return o;const{tag:r}=t,s=n.isCustomElement(r);if("input"===r||"textarea"===r||"select"===r||s){let e=Ba,i=!1;if("input"===r||s){const n=zl(t,"type");if(n){if(7===n.type)e=ja;else if(n.value)switch(n.value.content){case"radio":e=Va;break;case"checkbox":e=Ia;break;case"file":i=!0}}else(function(e){return e.props.some((e=>!(7!==e.type||"bind"!==e.name||e.arg&&4===e.arg.type&&e.arg.isStatic)))})(t)&&(e=ja)}else"select"===r&&(e=La);i||(o.needRuntime=n.helper(e))}return o.props=o.props.filter((e=>!(4===e.key.type&&"modelValue"===e.key.content))),o},on:(e,t,n)=>ka(e,0,n,(t=>{const{modifiers:o}=e;if(!o.length)return t;let{key:r,value:s}=t.props[0];const{keyModifiers:i,nonKeyModifiers:l,eventOptionModifiers:c}=((e,t,n,o)=>{const r=[],s=[],i=[];for(let l=0;l({props:[],needRuntime:n.helper(Ha)})};const su=Object.create(null);function iu(e,t){if(!R(e)){if(!e.nodeType)return y;e=e.innerHTML}const n=e,o=su[n];if(o)return o;if("#"===e[0]){const t=document.querySelector(e);e=t?t.innerHTML:""}const{code:r}=function(e,t={}){return Ma(e,C({},Ja,t,{nodeTransforms:[nu,...ou,...t.nodeTransforms||[]],directiveTransforms:C({},ru,t.directiveTransforms||{}),transformHoist:null}))}(e,C({hoistStatic:!0,onError:void 0,onWarn:y},t)),s=new Function(r)();return s._rc=!0,su[n]=s}return ts(iu),e.BaseTransition=Un,e.Comment=br,e.EffectScope=te,e.Fragment=vr,e.KeepAlive=Qn,e.ReactiveEffect=fe,e.Static=_r,e.Suspense=wn,e.Teleport=gr,e.Text=yr,e.Transition=Bs,e.TransitionGroup=ni,e.VueElement=As,e.callWithAsyncErrorHandling=Lt,e.callWithErrorHandling=Bt,e.camelize=W,e.capitalize=G,e.cloneVNode=Ir,e.compatUtils=null,e.compile=iu,e.computed=cs,e.createApp=(...e)=>{const t=Ni().createApp(...e),{mount:n}=t;return t.mount=e=>{const o=Fi(e);if(!o)return;const r=t._component;F(r)||r.render||r.template||(r.template=o.innerHTML),o.innerHTML="";const s=n(o,!1,o instanceof SVGElement);return o instanceof Element&&(o.removeAttribute("v-cloak"),o.setAttribute("data-v-app","")),s},t},e.createBlock=Er,e.createCommentVNode=function(e="",t=!1){return t?(Cr(),Er(br,null,e)):Mr(br,null,e)},e.createElementBlock=function(e,t,n,o,r,s){return Nr(Pr(e,t,n,o,r,s,!0))},e.createElementVNode=Pr,e.createHydrationRenderer=cr,e.createPropsRestProxy=function(e,t){const n={};for(const o in e)t.includes(o)||Object.defineProperty(n,o,{enumerable:!0,get:()=>e[o]});return n},e.createRenderer=lr,e.createSSRApp=(...e)=>{const t=Ei().createApp(...e),{mount:n}=t;return t.mount=e=>{const t=Fi(e);if(t)return n(t,!0,t instanceof SVGElement)},t},e.createSlots=function(e,t){for(let n=0;n{let e;return a||(e=a=t().catch((e=>{if(e=e instanceof Error?e:new Error(String(e)),l)return new Promise(((t,n)=>{l(e,(()=>t((u++,a=null,p()))),(()=>n(e)),u+1)}));throw e})).then((t=>e!==a&&a?a:(t&&(t.__esModule||"Module"===t[Symbol.toStringTag])&&(t=t.default),c=t,t))))};return qn({name:"AsyncComponentWrapper",__asyncLoader:p,get __asyncResolved(){return c},setup(){const e=Kr;if(c)return()=>Yn(c,e);const t=t=>{a=null,jt(t,e,13,!o)};if(i&&e.suspense)return p().then((t=>()=>Yn(t,e))).catch((e=>(t(e),()=>o?Mr(o,{error:e}):null)));const l=kt(!1),u=kt(),f=kt(!!r);return r&&setTimeout((()=>{f.value=!1}),r),null!=s&&setTimeout((()=>{if(!l.value&&!u.value){const e=new Error(`Async component timed out after ${s}ms.`);t(e),u.value=e}}),s),p().then((()=>{l.value=!0,e.parent&&Zn(e.parent.vnode)&&tn(e.parent.update)})).catch((e=>{t(e),u.value=e})),()=>l.value&&c?Yn(c,e):u.value&&o?Mr(o,{error:u.value}):n&&!f.value?Mr(n):void 0}})},e.defineComponent=qn,e.defineCustomElement=Fs,e.defineEmits=function(){return null},e.defineExpose=function(e){},e.defineProps=function(){return null},e.defineSSRCustomElement=e=>Fs(e,Oi),e.effect=function(e,t){e.effect&&(e=e.effect.fn);const n=new fe(e);t&&(C(n,t),t.scope&&ne(n,t.scope)),t&&t.lazy||n.run();const o=n.run.bind(n);return o.effect=n,o},e.effectScope=function(e){return new te(e)},e.getCurrentInstance=Gr,e.getCurrentScope=function(){return ee},e.getTransitionRawChildren=Gn,e.guardReactiveProps=Vr,e.h=us,e.handleError=jt,e.hydrate=Oi,e.initCustomFormatter=function(){},e.initDirectivesForSSR=Ri,e.inject=Fn,e.isMemoSame=fs,e.isProxy=vt,e.isReactive=ht,e.isReadonly=mt,e.isRef=wt,e.isRuntimeOnly=()=>!Zr,e.isShallow=gt,e.isVNode=$r,e.markRaw=bt,e.mergeDefaults=function(e,t){const n=N(e)?e.reduce(((e,t)=>(e[t]={},e)),{}):e;for(const o in t){const e=n[o];e?N(e)||F(e)?n[o]={type:e,default:t[o]}:e.default=t[o]:null===e&&(n[o]={default:t[o]})}return n},e.mergeProps=Dr,e.nextTick=en,e.normalizeClass=a,e.normalizeProps=function(e){if(!e)return null;let{class:t,style:n}=e;return t&&!R(t)&&(e.class=a(t)),n&&(e.style=s(n)),e},e.normalizeStyle=s,e.onActivated=eo,e.onBeforeMount=co,e.onBeforeUnmount=fo,e.onBeforeUpdate=uo,e.onDeactivated=to,e.onErrorCaptured=yo,e.onMounted=ao,e.onRenderTracked=vo,e.onRenderTriggered=go,e.onScopeDispose=function(e){ee&&ee.cleanups.push(e)},e.onServerPrefetch=mo,e.onUnmounted=ho,e.onUpdated=po,e.openBlock=Cr,e.popScopeId=function(){mn=null},e.provide=On,e.proxyRefs=Ot,e.pushScopeId=function(e){mn=e},e.queuePostFlushCb=rn,e.reactive=ut,e.readonly=ft,e.ref=kt,e.registerRuntimeCompiler=ts,e.render=$i,e.renderList=function(e,t,n,o){let r;const s=n&&n[o];if(N(e)||R(e)){r=new Array(e.length);for(let n=0,o=e.length;nt(e,n,void 0,s&&s[n])));else{const n=Object.keys(e);r=new Array(n.length);for(let o=0,i=n.length;oe.devtools.emit(t,...n))),un=[];else if("undefined"!=typeof window&&window.HTMLElement&&!(null===(s=null===(r=window.navigator)||void 0===r?void 0:r.userAgent)||void 0===s?void 0:s.includes("jsdom"))){(o.__VUE_DEVTOOLS_HOOK_REPLAY__=o.__VUE_DEVTOOLS_HOOK_REPLAY__||[]).push((e=>{t(e,o)})),setTimeout((()=>{e.devtools||(o.__VUE_DEVTOOLS_HOOK_REPLAY__=null,un=[])}),3e3)}else un=[]},e.setTransitionHooks=Kn,e.shallowReactive=pt,e.shallowReadonly=function(e){return dt(e,!0,Ve,rt,ct)},e.shallowRef=function(e){return Tt(e,!0)},e.ssrContextKey=ps,e.ssrUtils=null,e.stop=function(e){e.effect.stop()},e.toDisplayString=e=>R(e)?e:null==e?"":N(e)||P(e)&&(e.toString===V||!F(e.toString))?JSON.stringify(e,m,2):String(e),e.toHandlerKey=q,e.toHandlers=function(e){const t={};for(const n in e)t[q(n)]=e[n];return t},e.toRaw=yt,e.toRef=At,e.toRefs=function(e){const t=N(e)?new Array(e.length):{};for(const n in e)t[n]=At(e,n);return t},e.transformVNodeArgs=function(e){},e.triggerRef=function(e){Ct(e)},e.unref=Et,e.useAttrs=function(){return as().attrs},e.useCssModule=function(e="$style"){return g},e.useCssVars=function(e){const t=Gr();if(!t)return;const n=()=>Ps(t.subTree,e(t.proxy));Rn(n),ao((()=>{const e=new MutationObserver(n);e.observe(t.subTree.el.parentNode,{childList:!0}),ho((()=>e.disconnect()))}))},e.useSSRContext=()=>{},e.useSlots=function(){return as().slots},e.useTransitionState=Ln,e.vModelCheckbox=ui,e.vModelDynamic=vi,e.vModelRadio=fi,e.vModelSelect=di,e.vModelText=ai,e.vShow=xi,e.version=ds,e.warn=function(e,...t){ge();const n=Mt.length?Mt[Mt.length-1].component:null,o=n&&n.appContext.config.warnHandler,r=function(){let e=Mt[Mt.length-1];if(!e)return[];const t=[];for(;e;){const n=t[0];n&&n.vnode===e?n.recurseCount++:t.push({vnode:e,recurseCount:0});const o=e.component&&e.component.parent;e=o&&o.vnode}return t}();if(o)Bt(o,n,11,[e+t.join(""),n&&n.proxy,r.map((({vnode:e})=>`at <${ls(n,e.type)}>`)).join("\n"),r]);else{const n=[`[Vue warn]: ${e}`,...t];r.length&&n.push("\n",...function(e){const t=[];return e.forEach(((e,n)=>{t.push(...0===n?[]:["\n"],...function({vnode:e,recurseCount:t}){const n=t>0?`... (${t} recursive calls)`:"",o=` at <${ls(e.component,e.type,!!e.component&&null==e.component.parent)}`,r=">"+n;return e.props?[o,...Vt(e.props),r]:[o+r]}(e))})),t}(r)),console.warn(...n)}ve()},e.watch=Pn,e.watchEffect=function(e,t){return Mn(e,null,t)},e.watchPostEffect=Rn,e.watchSyncEffect=function(e,t){return Mn(e,null,{flush:"sync"})},e.withAsyncContext=function(e){const t=Gr();let n=e();return Jr(),M(n)&&(n=n.catch((e=>{throw qr(t),e}))),[n,()=>qr(t)]},e.withCtx=vn,e.withDefaults=function(e,t){return null},e.withDirectives=function(e,t){const n=hn;if(null===n)return e;const o=rs(n)||n.proxy,r=e.dirs||(e.dirs=[]);for(let s=0;sn=>{if(!("key"in n))return;const o=K(n.key);return t.some((e=>e===o||Si[e]===o))?e(n):void 0},e.withMemo=function(e,t,n,o){const r=n[o];if(r&&fs(r,e))return r;const s=t();return s.memo=e.slice(),n[o]=s},e.withModifiers=(e,t)=>(n,...o)=>{for(let e=0;evn,Object.defineProperty(e,"__esModule",{value:!0}),e}({}); 2 | -------------------------------------------------------------------------------- /mastodon-login-example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 0) { 58 | const params = new URLSearchParams(window.location.search); 59 | if (params.has('code')) { 60 | const accessCode = params.get('code'); 61 | await this.get_access_token(accessCode); 62 | window.history.replaceState({}, document.title, window.location.pathname); 63 | } 64 | } 65 | } 66 | 67 | async register_application() { 68 | console.log('logging in'); 69 | if (this.accessToken) { 70 | console.log('already logged in'); 71 | return; 72 | } 73 | const url = `${this.instanceURL}/api/v1/apps`; 74 | const response = await fetch(url, { 75 | method: 'POST', 76 | headers: { 77 | 'Content-Type': 'application/json', 78 | }, 79 | body: JSON.stringify({ 80 | client_name: this.options.app_name, 81 | redirect_uris: this.redirectUri, 82 | scopes: this.options.scopes, 83 | website: this.options.app_url, 84 | }), 85 | }); 86 | const data = await response.json(); 87 | this.clientId = data.client_id; 88 | this.clientSecret = data.client_secret; 89 | this.save() 90 | return data; 91 | } 92 | 93 | async get_access_token(accessCode) { 94 | const response = await fetch(`${this.instanceURL}/oauth/token`, { 95 | method: 'POST', 96 | headers: { 97 | 'Content-Type': 'application/json', 98 | }, 99 | body: JSON.stringify({ 100 | client_id: this.clientId, 101 | client_secret: this.clientSecret, 102 | code: accessCode, 103 | redirect_uri: this.redirectUri, 104 | grant_type: 'authorization_code', 105 | scope: this.options.scopes, 106 | } 107 | )}); 108 | const data = await response.json(); 109 | this.accessToken = data.access_token; 110 | this.save(); 111 | } 112 | 113 | generate_auth_link() { 114 | const params = new URLSearchParams({ 115 | client_id: this.clientId, 116 | redirect_uri: this.redirectUri, 117 | response_type: 'code', 118 | scope: this.options.scopes, 119 | }); 120 | return `${this.instanceURL}/oauth/authorize?${params}`; 121 | } 122 | 123 | normalize(path) { 124 | if (path.startsWith('/')) { 125 | return `${this.instanceURL}${path}`; 126 | } 127 | return path; 128 | } 129 | 130 | async post(path, data) { 131 | const response = await fetch(this.normalize(path), { 132 | method: 'POST', 133 | headers: { 134 | 'Content-Type': 'application/json', 135 | 'Authorization': `Bearer ${this.accessToken}`, 136 | }, 137 | body: JSON.stringify(data), 138 | }); 139 | return response; 140 | } 141 | 142 | 143 | async get(path) { 144 | const response = await fetch(this.normalize(path), { 145 | headers: { 146 | 'Authorization': `Bearer ${this.accessToken}`, 147 | }, 148 | }); 149 | return response; 150 | } 151 | } 152 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | /* global Vue */ // for eslint 2 | /* global Mastodon */ // for eslint 3 | 4 | var app = Vue.createApp({ 5 | el: '#app', 6 | data() { 7 | return { 8 | server: "", 9 | mastodon: undefined, 10 | relationships: {}, 11 | ids: [], 12 | next_following_url: null, 13 | following_count: undefined, 14 | waiting: false, 15 | toots: undefined, 16 | current_account: undefined, 17 | user_id: undefined, 18 | } 19 | }, 20 | async mounted() { 21 | this.mastodon = await Mastodon.initialize({ 22 | app_name: 'manage-boosts', 23 | app_url: 'https://turn-off-boosts.jvns.ca', 24 | scopes: 'read:accounts read:statuses read:follows write:follows', 25 | }); 26 | if (!this.mastodon.loggedIn()) { 27 | return; 28 | } 29 | 30 | this.user_id = await this.get_user_id(); 31 | this.following_count = await this.get_following_count(); 32 | 33 | this.next_following_url = `/api/v1/accounts/${this.user_id}/following?limit=40`; 34 | window.addEventListener('scroll', this.handleScroll); 35 | // set toots = undefiend on escape press 36 | window.addEventListener('keydown', (e) => { 37 | if (e.key === 'Escape') { 38 | this.toots = undefined; 39 | } 40 | }); 41 | this.getAllRelationships(); 42 | }, 43 | 44 | 45 | methods: { 46 | logout() { 47 | this.mastodon.logout(); 48 | }, 49 | 50 | async get_user_id() { 51 | const response = await this.mastodon.get('/api/v1/accounts/verify_credentials'); 52 | if (!response.ok) { 53 | alert('error getting user id'); 54 | } 55 | const data = await response.json(); 56 | return data.id; 57 | }, 58 | 59 | async getAllRelationships() { 60 | while (this.next_following_url !== undefined) { 61 | try { 62 | await this.getRelationships(); 63 | } catch (e) { 64 | console.log(e) 65 | } 66 | await this.sleep(1000); 67 | } 68 | }, 69 | 70 | sleep(ms) { 71 | return new Promise(resolve => setTimeout(resolve, ms)); 72 | }, 73 | 74 | async getRelationships() { 75 | const response = await this.mastodon.get(this.next_following_url) 76 | if (!response.ok) { 77 | throw new Error('error getting relationships'); 78 | } 79 | 80 | const following = await response.json(); 81 | const following_by_id = {}; 82 | const ids = []; 83 | for (const account of following) { 84 | ids.push(account.id); 85 | following_by_id[account.id] = account; 86 | } 87 | const relationships_response = await this.mastodon.get(`/api/v1/accounts/relationships?id[]=${ids.join('&id[]=')}`); 88 | if (!relationships_response.ok) { 89 | throw new Error('error getting IDs'); 90 | } 91 | const relationships = await (relationships_response).json(); 92 | for (const relationship of relationships) { 93 | const account = following_by_id[relationship.id]; 94 | this.relationships[relationship.id] = { 95 | id: relationship.id, 96 | avatar: account.avatar, 97 | username: account.username, 98 | display_name: account.display_name, 99 | acct: account.acct, 100 | showing_reblogs: relationship.showing_reblogs, 101 | } 102 | this.ids.push(relationship.id); 103 | } 104 | 105 | try { 106 | this.next_following_url = response.headers.get('Link').split(',').find(link => link.includes('rel="next"')).split(';')[0].slice(1, -1); 107 | } catch (e) { 108 | this.next_following_url = undefined; 109 | } 110 | }, 111 | 112 | random_placeholder() { 113 | const servers = [ "kolektiva.social", "social.coop", "fediscience.org", "mstdn.party", "toot.community", "types.pl", "macaw.social", "social.tchncs.de", "c.im", "recurse.social", "noc.social", "masto.ai", "toot.cat", "mstdn.ca", "phpc.social", "treehouse.systems", "mastodon.me.uk", "social.linux.pizza", "vis.social", "toot.cafe", 114 | "mamot.fr", "mastodon.nz", "aus.social", "mastodon.xyz", "indieweb.social", "sfba.social", "data-folks.masto.host", "mastodon.ie", "sigmoid.social", "ioc.exchange", "mathstodon.xyz", "mastodon.world", "octodon.social", "piaille.fr", "mastodon.sdf.org", 115 | "tech.lgbt", "mastodon.lol", "mastodon.gamedev.place", "techhub.social", "mastodon.cloud", "ruby.social", "chaos.social", "mstdn.social", "mas.to", 116 | "mastodon.online", "fosstodon.org", "infosec.exchange", "hachyderm.io", "mastodon.social"] 117 | return servers[Math.floor(Math.random() * servers.length)]; 118 | }, 119 | 120 | async showBoosts(id) { 121 | const relationship = this.relationships[id]; 122 | relationship.showing_reblogs = true; 123 | const response = await (await this.mastodon.post(`/api/v1/accounts/${id}/follow`, { 124 | reblogs: true, 125 | })).json(); 126 | if (response.error) { 127 | alert(response.error); 128 | } 129 | }, 130 | 131 | async hideBoosts(id) { 132 | const relationship = this.relationships[id]; 133 | relationship.showing_reblogs = false; 134 | const response = await this.mastodon.post(`/api/v1/accounts/${id}/follow`, { 135 | reblogs: false, 136 | }); 137 | if (response.json().error) { 138 | alert(response.error); 139 | } 140 | }, 141 | 142 | async previewToots(id) { 143 | this.current_account = id; 144 | const toots = await (await this.mastodon.get(`/api/v1/accounts/${id}/statuses?limit=20`)).json(); 145 | console.log(toots); 146 | // filter out everything but boosts 147 | this.toots = []; 148 | for (const toot of toots) { 149 | if (toot.reblog) { 150 | this.toots.push(toot.reblog); 151 | } 152 | } 153 | }, 154 | 155 | async get_following_count() { 156 | // get number of people user is following 157 | // GET https://mastodon.social/api/v1/accounts/219022 158 | const response = await this.mastodon.get(`/api/v1/accounts/${this.user_id}`); 159 | const data = await response.json(); 160 | return data.following_count; 161 | }, 162 | 163 | login: async function() { 164 | const server = this.server; 165 | if (server == "") { 166 | alert("Please enter a server address"); 167 | return; 168 | } 169 | 170 | await this.mastodon.login("https://" + server); 171 | }, 172 | } 173 | }) 174 | 175 | 176 | app.mount('#app') 177 | --------------------------------------------------------------------------------