mutoe / vue3-realworld-example-app Goto Github PK

View Code? Open in Web Editor NEW

903.0 10.0 299.0 3.57 MB

Explore the charm of Vue composition API! Vite?

Home Page: https://vue3-realworld-example-app-mutoe.vercel.app

License: MIT License

HTML 0.47% Vue 25.55% TypeScript 73.72% JavaScript 0.26%

vue3 vite typescript vue-test-utils realworld composition-api testing-library-vue cypress

vue3-realworld-example-app's Introduction

vue3-realworld-example-app's People

Contributors

Stargazers

Watchers

Forkers

plumrx schraj soerenmartius xchsp toybz levensworth edwardz8 ayarotsky vueprofans abhijeetj100 reginaldosoares edwardceballos harrytran998 minchao ngarawakimani namwebdev zhuxindaba amgando baajarmeh ppastene bayramorhan roger45663 zako05 ae86jack mattcheely tp6gw94 smani klausdg newjett0617 zerotocode forkai luiseduardoramos kazi94 selvaece25 zhangyunchencc tsipiniuk anyuruf charlesb9 romasszhs thoughtbit whizkid79 akamiya208 dlwije sww-test sodatea heart-er wangfengyuan nitkiewiczartur jenokarthic seogi1004 shahburhan pujakesuma wahyufeb ingcco aaronxjs tatedevito besfir rodgeraraujo bekmuradov sajadhsm glockio goodhabitz agungroyat quanghm27 chiennd1997 dzineer fhernand23 xbs-nathan cfqzero whamsicore jimin9038 faustineg tamphamdev tuanhaviet22 guillermomolina wubin1989 khanht9x jpmmota cccuong-jason 1103409364 hanh2212 vncey ssoon-m romainshen fullstacksushil o27mochi log7788 willcode2surf randercarlos circleci-junho pannyynss nguyenducmanh2106 jcegiel devjasonclarke zkycarry flexihopper afai-ge kai2128 jeremielate gaochnggg

vue3-realworld-example-app's Issues

use vitest as testing library?

is there any plan to use vitest as the testing library?
will be good example as vitest is the recommended testing library now.

New tags

@mutoe could you add this tags: composition-api and realworld to repository description, please?

XSS Injection

https://mutoe.github.io/vue3-realworld-example-app/#/article/xss-test-qsfwde

Due to governance changes, we are now using the realworld.io domain for the RealWorld demo (both client and API).
Requests from conduit.productionready.io are redirected to api.realworld.io, but such a redirection might lead to inconsistent responses.

We encourage domain change for the community.
If this repository is maintained anymore, we'll consider hosting a demo of your implementation in a few weeks with the domain change.

The demo link will be added to the RealWorld documentation.

Vite out of memory

Running our application locally results in an error: JavaScript heap out of memory
This happens when vite optimizing dependencies. It takes approximately 3.5Gb of memory

If you also encounter this problem, try to increase the node memory limit (if you have that amount) using the command

node --max_old_space_size=5048 ./node_modules/vite/bin/vite.js

Log

<--- Last few GCs --->

[5904:00000000003CE030] 33601 ms: Mark-sweep 2050.1 (2052.7) -> 2050.0 (2053.2) MB, 42.6 / 0.0 ms (average mu = 0.183, current mu = 0.001) allocation failure scavenge might not succeed

<--- JS stacktrace --->

==== JS stack trace =========================================

0: ExitFrame [pc: 000000014087978D]
1: StubFrame [pc: 0000000140859BC9]

Security context: 0x01a595e808d1
2: split [000001A595E8EBC1](this=0x0071d7880119 <Very long string[2079883]>,0x033bfa0c9ce1 <JSRegExp <String[#24]: \r\n|\r|\n|\u2028|\u2029>>)
3: parseStackLinesV8 [00000397D2BBF539] [D:\projects\vue3-realworld-example-app\node_modules\esbuild\lib\main.js:1148] [bytecode=0000012268D26B81 offset=195](this=0x01...

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
1: 000000013FC651EF napi_wrap+114271
2: 000000013FC0FE66 v8::base::CPU::has_sse+66630
3: 000000013FC10C66 v8::base::CPU::has_sse+70214
4: 000000014042522E v8::Isolate::ReportExternalAllocationLimitReached+94
5: 000000014040D301 v8::SharedArrayBuffer::Externalize+833
6: 00000001402D983C v8::internal::Heap::EphemeronKeyWriteBarrierFromCode+1436
7: 00000001402E4A70 v8::internal::Heap::ProtectUnprotectedMemoryChunks+1312
8: 00000001402E1594 v8::internal::Heap::PageFlagsAreConsistent+3204
9: 00000001402D6D93 v8::internal::Heap::CollectGarbage+1283
10: 00000001402D6184 v8::internal::Heap::CollectAllAvailableGarbage+196
11: 00000001402D5484 v8::internal::Heap::AddRetainedMap+2580
12: 00000001402F660D v8::internal::Factory::NewFillerObject+61
13: 000000014005CCA1 v8::internal::interpreter::JumpTableTargetOffsets::iterator::operator=+1665
14: 000000014087978D v8::internal::SetupIsolateDelegate::SetupHeap+546637
15: 0000000140859BC9 v8::internal::SetupIsolateDelegate::SetupHeap+416649
16: 0000000140866D72 v8::internal::SetupIsolateDelegate::SetupHeap+470322
17: 00000001407FE73C v8::internal::SetupIsolateDelegate::SetupHeap+42748
18: 00000001407FE73C v8::internal::SetupIsolateDelegate::SetupHeap+42748
19: 00000001407FE73C v8::internal::SetupIsolateDelegate::SetupHeap+42748
20: 00000001407FE73C v8::internal::SetupIsolateDelegate::SetupHeap+42748
21: 00000001407FE73C v8::internal::SetupIsolateDelegate::SetupHeap+42748
22: 00000001407FE73C v8::internal::SetupIsolateDelegate::SetupHeap+42748
23: 00000001407FE73C v8::internal::SetupIsolateDelegate::SetupHeap+42748
24: 000000014084C906 v8::internal::SetupIsolateDelegate::SetupHeap+362694
25: 00000001407F9DF3 v8::internal::SetupIsolateDelegate::SetupHeap+23987
26: 00000001408DDF70 v8::internal::SetupIsolateDelegate::SetupHeap+958256
27: 00000001407FE73C v8::internal::SetupIsolateDelegate::SetupHeap+42748
28: 00000001407FE73C v8::internal::SetupIsolateDelegate::SetupHeap+42748
29: 00000001407FE73C v8::internal::SetupIsolateDelegate::SetupHeap+42748
30: 0000000140895099 v8::internal::SetupIsolateDelegate::SetupHeap+659545
31: 00000001407FE73C v8::internal::SetupIsolateDelegate::SetupHeap+42748
32: 00000001408293E3 v8::internal::SetupIsolateDelegate::SetupHeap+218019
33: 000000014084DD42 v8::internal::SetupIsolateDelegate::SetupHeap+367874
34: 000000014081B8DD v8::internal::SetupIsolateDelegate::SetupHeap+161949
35: 00000001407FBB5C v8::internal::SetupIsolateDelegate::SetupHeap+31516
36: 0000000140332F80 v8::internal::Execution::CallWasm+1536
37: 0000000140333073 v8::internal::Execution::CallWasm+1779
38: 0000000140333452 v8::internal::Execution::TryCall+354
39: 0000000140315465 v8::internal::MicrotaskQueue::RunMicrotasks+501
40: 00000001403D8EC0 v8::internal::Builtins::builtin_handle+323456
41: 00000001403D8407 v8::internal::Builtins::builtin_handle+320711
42: 00000001403D8748 v8::internal::Builtins::builtin_handle+321544
43: 00000001403D854E v8::internal::Builtins::builtin_handle+321038
44: 000000014087988D v8::internal::SetupIsolateDelegate::SetupHeap+546893
45: 00000001407FE73C v8::internal::SetupIsolateDelegate::SetupHeap+42748
46: 00000001407FBC71 v8::internal::SetupIsolateDelegate::SetupHeap+31793
47: 00000001407FB85C v8::internal::SetupIsolateDelegate::SetupHeap+30748
48: 0000000140332EF3 v8::internal::Execution::CallWasm+1395
49: 0000000140332876 v8::internal::Execution::Call+182
50: 000000014040390D v8::Function::Call+605
51: 000000013FC85DB6 node::CallbackScope::~CallbackScope+998
52: 000000013FC86080 node::CallbackScope::~CallbackScope+1712
53: 000000013FC7F70B v8::internal::compiler::Operator::EffectOutputCount+235
54: 000000013FC059E3 v8::base::CPU::has_sse+24515
55: 000000013FBFB2A1 v8::internal::OrderedHashTablev8::internal::OrderedHashMap,2::NumberOfBucketsOffset+61089
56: 000000013FCB8937 uv_timer_stop+775
57: 000000013FCB52BB uv_async_send+331
58: 000000013FCB4A5C uv_loop_init+1212
59: 000000013FCB4C24 uv_run+244
60: 000000013FBC68F1 v8::internal::interpreter::BytecodeArrayWriter::source_position_table_builder+31857
61: 000000013FC399A3 node::Start+275
62: 000000013FAA6A9C RC4_options+340380
63: 0000000140931878 v8::internal::SetupIsolateDelegate::SetupHeap+1300536
64: 0000000076B3652D BaseThreadInitThunk+13
65: 0000000076D6C541 RtlUserThreadStart+33

Avoid using one-word name for components

Respect style guide

why not just use new URLSearchParams(object).toString() ?

vue3-realworld-example-app/src/utils/params-to-query.ts

Line 2 in 2e48d2d

 return Object.entries(params).map(([key, value]) => `${key}=${value.toString()}`).join('&') 

love reading your code btw 👍

Unit test

I'm trying to add a unit test for the SFC file, but I got

error TS1343: The 'import.meta' meta-property is only allowed when the '--module' option is 'esnext' or 'system'.

Seems like ts-jest not recognize the import.meta syntax.

I don't know what to do. If anyone knows, please advise :p

ESLint explicit-module-boundary-types should be enable

I recommend removing "@typescript-eslint/explicit-module-boundary-types": "off" in package.json since it completely disables return type checking of module boundaries.

Maybe, instead of deactivating the rule globally, just use inline toggles?

// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
const useComposable = () => { ...

Bundle size optimize

register and login errors are not display

like this one

Use Harlem instead vuex

I would like to suggest to use plain composable functions instead vuex for a reason: awful typescript support at the moment
What I don't really like that we don't have any type hints in IDE
Current normal type checking is very wordy. Look closer to this repositories 1, 2

Based on @kiaking's topik I would like to use plain composables and after vuex v5 will be released, rewrite our store

@mutoe what do you think?

Reactivity bug on profile page

This bug occurs when moving from some user's profile directly to my profile

Fix with:

passing computed ref to useProfile composable
watch username computed ref and fetch profile on trigger

Methods naming

@mutoe, could i ask, why do you use this kind of function namings:
v-on: something = "on do something" (ex.: @update="onUpdateArticle")
Are there some styleguides or it is only your preference?

npm install failed on node 16

$ node -v
v16.13.0
$ npm install
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: @types/[email protected]
npm ERR! node_modules/@types/jest
npm ERR!   dev @types/jest@"^27.0.1" from the root project

Minor enhancements

As I was reading through the source code, I've listed some minor issues which may improve the project:

Route guards (Currently we can move to the login page by typing the address in the URL bar even when we are already logged in)
mapValidationResponse does not handle 403 error
No need to write <template #default> for suspense
Enforce an import order convention
Reset errors when re-submitting the forms
useArticles composable:
6.1. In fetchArticles function, since articleType can only have one value, it's better to use if-else rather than only if to skip other checks.
6.2 getArticlesMeta function is acting like a composable. So maybe it's better to rename it to useArticlesMeta
Vue docs doesn't recommend using generic argument for reactive(). So it may be better to change current generic usage.
In AppLink component, useAttrs and v-bind="attrs" can be removed because of Fallthrough Attributes
Add "Not Found" page

I would like to help fix these issues if they are valid to you. :D

There is no error dispaly when updating the setting

curl 'https://conduit.productionready.io/api/user' -X PUT -H 'User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:87.0) Gecko/20100101 Firefox/87.0' -H 'Accept: */*' -H 'Accept-Language: en-US,en;q=0.5' --compressed -H 'Referer: https://vue3-realworld-example-app-mutoe.vercel.app/' -H 'Content-Type: application/json' -H 'Authorization: Token xxx' -H 'Origin: https://vue3-realworld-example-app-mutoe.vercel.app' -H 'Connection: keep-alive' -H 'TE: Trailers' --data-raw '{"username":"plumrx","email":"[email protected]"}'

When I using deepmerge in vite project

When I merge the #10 , I got this error in browser and dev mode

Uncaught SyntaxError: import not found: default

It located the 1st line in request.ts

import merge from 'deepmerge'
^^^^^^

@levchak0910 Do you have any idea?

Getting JWT Error while update profile and create new Article.

Hello there,

thanks for your contribution
i am new in Vuejs, for learning purpose i setuped this repo with laravel realworld backend
i am getting this error while update profile or create new article.
{"errors":{"message":"JWT error: Token is absent","status_code":401}}

Thanks

mutoe / vue3-realworld-example-app Goto Github PK

vue3-realworld-example-app's Introduction

Vue3 codebase containing real world examples (CRUD, auth, advanced patterns, etc) that adheres to the RealWorld spec and API.

What works?

Getting started

Contributors

Vue related implementations of the Realworld app

Sponsor

vue3-realworld-example-app's People

Contributors

Stargazers

Watchers

Forkers

vue3-realworld-example-app's Issues

Recommend Projects

Recommend Topics

Recommend Org