valere
/
design-patterns-nuxt
1
0
Förgrening 0
Kod Ärenden 0 Pull-förfrågningar 0 Släpp 0 Wiki Aktiviteter
Bläddra i källkod

FEAT: comment

master
valere 5 månader sedan
förälder
00d8af722f
incheckning
5a8434d456
8 ändrade filer med 408 tillägg och 79 borttagningar
Delad Vy
Diff Options
Show Stats Download Patch File Download Diff File
  1. +8
    -30
      README.md
  2. +23
    -0
      components/comment/form.vue
  3. +13
    -0
      components/comment/list.vue
  4. +5
    -1
      nuxt.config.ts
  5. +333
    -45
      package-lock.json
  6. +4
    -1
      package.json
  7. +2
    -2
      pages/details/[id].vue
  8. +20
    -0
      stores/comment.ts

+ 8
- 30
README.md Visa fil

@@ -1,30 +1,8 @@
les stars / têtes d’affiche,
les catégories, la note TMDB et le nombre de personnes ayant noté le
film.
- En dessous des informations du film, on souhaite pouvoir laisser des
commentaires. Réalisez un formulaire contenant les champs suivants (à
stocker dans le local storage) et listez les commentaires du plus récent au
plus ancien :
- Nom d’utilisateur
- Chaîne de caractères alphas
- Longueur minimum de 3 caractères
- Longueur maximum de 50 caractères
- Champs requis
- Message
- Chaîne de caractères alphanumérique
- Longueur minimum de 3 caractères
- Longueur maximum de 500 caractères
- Champs requis
- L’utilisation d’un Wysiwyg tel que TinyMCE est un plus
- Note du film
- Valeur numérique de 1 à 10
Indications :
- Les variables doivent être typées et les SFC doivent être réalisés en utilisant la
Composition API et TypeScript.
- L’utilisation de NuxtJS, Vuetify, TailwindCSS, SCSS, Vuelidate, VueUse est un
plus
- L’installation d’outils de lint, de tests, de stores est un plus
- Une présentation graphique attirante contenant de possibles animations est un plus
- L’ajout de skeletons est un plus
- N’hésitez pas à commenter votre code et créer des commits sur Git au fur et à
mesure de votre progression
- tinymce
- style
- variables typées
- Vuetify
- Vuelidate
- tests
- animations
- skeletons

+ 23
- 0
components/comment/form.vue Visa fil

@@ -0,0 +1,23 @@
<template>
<form @submit.prevent="sendComment()" class="flex flex-col">
<input v-model="username" type="text" placeholder="username" min="3" max="50" required id="username">
<textarea v-model="message" type="textarea" placeholder="message" min="3" max="500" required id="message" />
<input type="range" name="score" min="1" max="10" id="score">
<button type="submit">envoyer</button>
</form>
</template>

<script setup lang="ts">
const store = useCommentStore()
const props = defineProps(['filmId'])

const sendComment = () => {
store.add({
username: username.value,
message: message.value,
score: document.getElementById('score').value,
film: props.filmId,
added: Date.now(),
})
}
</script>

+ 13
- 0
components/comment/list.vue Visa fil

@@ -0,0 +1,13 @@
<template>
<ul>
<li v-for="comment in store.orderedComment">
{{ comment.username }}
{{ comment.added }}
{{ comment.message }}
</li>
</ul>
<div class="mt-24"></div>
</template>
<script setup>
const store = useCommentStore()
</script>

+ 5
- 1
nuxt.config.ts Visa fil

@@ -2,7 +2,10 @@
export default defineNuxtConfig({
devtools: { enabled: true },
css: ['~/assets/css/main.css'],

modules: [
'@pinia/nuxt',
'@vueuse/nuxt',
],
postcss: {
plugins: {
tailwindcss: {},
@@ -25,4 +28,5 @@ export default defineNuxtConfig({
},

compatibilityDate: '2024-10-06',
modules: ['@pinia/nuxt'],
})

+ 333
- 45
package-lock.json Visa fil

@@ -7,6 +7,7 @@
"name": "nuxt-app",
"hasInstallScript": true,
"dependencies": {
"@pinia/nuxt": "^0.5.5",
"axios": "^1.7.7",
"node-fetch": "^3.3.2",
"nuxt": "^3.12.3",
@@ -15,6 +16,8 @@
"vue-router": "^4.4.0"
},
"devDependencies": {
"@vueuse/core": "^11.1.0",
"@vueuse/nuxt": "^11.1.0",
"autoprefixer": "^10.4.19",
"postcss": "^8.4.39",
"sass": "^1.77.6",
@@ -727,9 +730,9 @@
}
},
"node_modules/@jridgewell/sourcemap-codec": {
"version": "1.4.15",
"resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
"integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
"version": "1.5.0",
"resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
"integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ=="
},
"node_modules/@jridgewell/trace-mapping": {
"version": "0.3.25",
@@ -1173,6 +1176,18 @@
"node": ">=0.10"
}
},
"node_modules/@pinia/nuxt": {
"version": "0.5.5",
"resolved": "https://registry.npmjs.org/@pinia/nuxt/-/nuxt-0.5.5.tgz",
"integrity": "sha512-wjxS7YqIesh4OLK+qE3ZjhdOJ5pYZQ+VlEmZNtTwzQn1Kavei/khovx7mzXVXNA/mvSPXVhb9xBzhyS3XMURtw==",
"dependencies": {
"@nuxt/kit": "^3.9.0",
"pinia": "^2.2.3"
},
"funding": {
"url": "https://github.com/sponsors/posva"
}
},
"node_modules/@pkgjs/parseargs": {
"version": "0.11.0",
"resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
@@ -1357,9 +1372,9 @@
}
},
"node_modules/@rollup/pluginutils": {
"version": "5.1.0",
"resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.1.0.tgz",
"integrity": "sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==",
"version": "5.1.2",
"resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.1.2.tgz",
"integrity": "sha512-/FIdS3PyZ39bjZlwqFnWqCOVnW7o963LtKMwQOD0NhQqw22gSr2YY1afu3FxRip4ZCZNsD5jq6Aaz6QV3D/Njw==",
"dependencies": {
"@types/estree": "^1.0.0",
"estree-walker": "^2.0.2",
@@ -1451,6 +1466,12 @@
"resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.2.tgz",
"integrity": "sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q=="
},
"node_modules/@types/web-bluetooth": {
"version": "0.0.20",
"resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz",
"integrity": "sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==",
"dev": true
},
"node_modules/@unhead/dom": {
"version": "1.9.16",
"resolved": "https://registry.npmjs.org/@unhead/dom/-/dom-1.9.16.tgz",
@@ -1922,6 +1943,193 @@
"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.31.tgz",
"integrity": "sha512-Yp3wtJk//8cO4NItOPpi3QkLExAr/aLBGZMmTtW9WpdwBCJpRM6zj9WgWktXAl8IDIozwNMByT45JP3tO3ACWA=="
},
"node_modules/@vueuse/core": {
"version": "11.1.0",
"resolved": "https://registry.npmjs.org/@vueuse/core/-/core-11.1.0.tgz",
"integrity": "sha512-P6dk79QYA6sKQnghrUz/1tHi0n9mrb/iO1WTMk/ElLmTyNqgDeSZ3wcDf6fRBGzRJbeG1dxzEOvLENMjr+E3fg==",
"dev": true,
"dependencies": {
"@types/web-bluetooth": "^0.0.20",
"@vueuse/metadata": "11.1.0",
"@vueuse/shared": "11.1.0",
"vue-demi": ">=0.14.10"
},
"funding": {
"url": "https://github.com/sponsors/antfu"
}
},
"node_modules/@vueuse/core/node_modules/vue-demi": {
"version": "0.14.10",
"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
"integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
"dev": true,
"hasInstallScript": true,
"bin": {
"vue-demi-fix": "bin/vue-demi-fix.js",
"vue-demi-switch": "bin/vue-demi-switch.js"
},
"engines": {
"node": ">=12"
},
"funding": {
"url": "https://github.com/sponsors/antfu"
},
"peerDependencies": {
"@vue/composition-api": "^1.0.0-rc.1",
"vue": "^3.0.0-0 || ^2.6.0"
},
"peerDependenciesMeta": {
"@vue/composition-api": {
"optional": true
}
}
},
"node_modules/@vueuse/metadata": {
"version": "11.1.0",
"resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-11.1.0.tgz",
"integrity": "sha512-l9Q502TBTaPYGanl1G+hPgd3QX5s4CGnpXriVBR5fEZ/goI6fvDaVmIl3Td8oKFurOxTmbXvBPSsgrd6eu6HYg==",
"dev": true,
"funding": {
"url": "https://github.com/sponsors/antfu"
}
},
"node_modules/@vueuse/nuxt": {
"version": "11.1.0",
"resolved": "https://registry.npmjs.org/@vueuse/nuxt/-/nuxt-11.1.0.tgz",
"integrity": "sha512-ZPYigcqgPPe9vk9nBHLF8p0zshX8qvWV/ox1Y4GdV4k2flPiw7+2THNTpU2NZDBXSOXlhB2sao+paGCsvJm/Qw==",
"dev": true,
"dependencies": {
"@nuxt/kit": "^3.13.2",
"@vueuse/core": "11.1.0",
"@vueuse/metadata": "11.1.0",
"local-pkg": "^0.5.0",
"vue-demi": ">=0.14.10"
},
"funding": {
"url": "https://github.com/sponsors/antfu"
},
"peerDependencies": {
"nuxt": "^3.0.0"
}
},
"node_modules/@vueuse/nuxt/node_modules/@nuxt/kit": {
"version": "3.13.2",
"resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-3.13.2.tgz",
"integrity": "sha512-KvRw21zU//wdz25IeE1E5m/aFSzhJloBRAQtv+evcFeZvuroIxpIQuUqhbzuwznaUwpiWbmwlcsp5uOWmi4vwA==",
"dev": true,
"dependencies": {
"@nuxt/schema": "3.13.2",
"c12": "^1.11.2",
"consola": "^3.2.3",
"defu": "^6.1.4",
"destr": "^2.0.3",
"globby": "^14.0.2",
"hash-sum": "^2.0.0",
"ignore": "^5.3.2",
"jiti": "^1.21.6",
"klona": "^2.0.6",
"knitwork": "^1.1.0",
"mlly": "^1.7.1",
"pathe": "^1.1.2",
"pkg-types": "^1.2.0",
"scule": "^1.3.0",
"semver": "^7.6.3",
"ufo": "^1.5.4",
"unctx": "^2.3.1",
"unimport": "^3.12.0",
"untyped": "^1.4.2"
},
"engines": {
"node": "^14.18.0 || >=16.10.0"
}
},
"node_modules/@vueuse/nuxt/node_modules/@nuxt/schema": {
"version": "3.13.2",
"resolved": "https://registry.npmjs.org/@nuxt/schema/-/schema-3.13.2.tgz",
"integrity": "sha512-CCZgpm+MkqtOMDEgF9SWgGPBXlQ01hV/6+2reDEpJuqFPGzV8HYKPBcIFvn7/z5ahtgutHLzjP71Na+hYcqSpw==",
"dev": true,
"dependencies": {
"compatx": "^0.1.8",
"consola": "^3.2.3",
"defu": "^6.1.4",
"hookable": "^5.5.3",
"pathe": "^1.1.2",
"pkg-types": "^1.2.0",
"scule": "^1.3.0",
"std-env": "^3.7.0",
"ufo": "^1.5.4",
"uncrypto": "^0.1.3",
"unimport": "^3.12.0",
"untyped": "^1.4.2"
},
"engines": {
"node": "^14.18.0 || >=16.10.0"
}
},
"node_modules/@vueuse/nuxt/node_modules/vue-demi": {
"version": "0.14.10",
"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
"integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
"dev": true,
"hasInstallScript": true,
"bin": {
"vue-demi-fix": "bin/vue-demi-fix.js",
"vue-demi-switch": "bin/vue-demi-switch.js"
},
"engines": {
"node": ">=12"
},
"funding": {
"url": "https://github.com/sponsors/antfu"
},
"peerDependencies": {
"@vue/composition-api": "^1.0.0-rc.1",
"vue": "^3.0.0-0 || ^2.6.0"
},
"peerDependenciesMeta": {
"@vue/composition-api": {
"optional": true
}
}
},
"node_modules/@vueuse/shared": {
"version": "11.1.0",
"resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-11.1.0.tgz",
"integrity": "sha512-YUtIpY122q7osj+zsNMFAfMTubGz0sn5QzE5gPzAIiCmtt2ha3uQUY1+JPyL4gRCTsLPX82Y9brNbo/aqlA91w==",
"dev": true,
"dependencies": {
"vue-demi": ">=0.14.10"
},
"funding": {
"url": "https://github.com/sponsors/antfu"
}
},
"node_modules/@vueuse/shared/node_modules/vue-demi": {
"version": "0.14.10",
"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
"integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
"dev": true,
"hasInstallScript": true,
"bin": {
"vue-demi-fix": "bin/vue-demi-fix.js",
"vue-demi-switch": "bin/vue-demi-switch.js"
},
"engines": {
"node": ">=12"
},
"funding": {
"url": "https://github.com/sponsors/antfu"
},
"peerDependencies": {
"@vue/composition-api": "^1.0.0-rc.1",
"vue": "^3.0.0-0 || ^2.6.0"
},
"peerDependenciesMeta": {
"@vue/composition-api": {
"optional": true
}
}
},
"node_modules/abbrev": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
@@ -2422,9 +2630,9 @@
}
},
"node_modules/c12": {
"version": "1.11.1",
"resolved": "https://registry.npmjs.org/c12/-/c12-1.11.1.tgz",
"integrity": "sha512-KDU0TvSvVdaYcQKQ6iPHATGz/7p/KiVjPg4vQrB6Jg/wX9R0yl5RZxWm9IoZqaIHD2+6PZd81+KMGwRr/lRIUg==",
"version": "1.11.2",
"resolved": "https://registry.npmjs.org/c12/-/c12-1.11.2.tgz",
"integrity": "sha512-oBs8a4uvSDO9dm8b7OCFW7+dgtVrwmwnrVXYzLm43ta7ep2jCn/0MhoUFygIWtxhyy6+/MG7/agvpY0U1Iemew==",
"dependencies": {
"chokidar": "^3.6.0",
"confbox": "^0.1.7",
@@ -2436,7 +2644,7 @@
"ohash": "^1.1.3",
"pathe": "^1.1.2",
"perfect-debounce": "^1.0.0",
"pkg-types": "^1.1.1",
"pkg-types": "^1.2.0",
"rc9": "^2.1.2"
},
"peerDependencies": {
@@ -4034,9 +4242,9 @@
]
},
"node_modules/ignore": {
"version": "5.3.1",
"resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.1.tgz",
"integrity": "sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw==",
"version": "5.3.2",
"resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
"integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==",
"engines": {
"node": ">= 4"
}
@@ -4557,11 +4765,11 @@
}
},
"node_modules/magic-string": {
"version": "0.30.10",
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.10.tgz",
"integrity": "sha512-iIRwTIf0QKV3UAnYK4PU8uiEc4SRh5jX0mwpIwETPpHdhVM4f53RSwS/vXvN1JhGX+Cs7B8qIq3d6AH49O5fAQ==",
"version": "0.30.11",
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.11.tgz",
"integrity": "sha512-+Wri9p0QHMy+545hKww7YAu5NyzF8iomPL/RQazugQ9+Ez4Ic3mERMd8ZTX5rfK944j+560ZJi8iAwgak1Ac7A==",
"dependencies": {
"@jridgewell/sourcemap-codec": "^1.4.15"
"@jridgewell/sourcemap-codec": "^1.5.0"
}
},
"node_modules/magic-string-ast": {
@@ -5545,6 +5753,56 @@
"node": ">=0.10.0"
}
},
"node_modules/pinia": {
"version": "2.2.4",
"resolved": "https://registry.npmjs.org/pinia/-/pinia-2.2.4.tgz",
"integrity": "sha512-K7ZhpMY9iJ9ShTC0cR2+PnxdQRuwVIsXDO/WIEV/RnMC/vmSoKDTKW/exNQYPI+4ij10UjXqdNiEHwn47McANQ==",
"dependencies": {
"@vue/devtools-api": "^6.6.3",
"vue-demi": "^0.14.10"
},
"funding": {
"url": "https://github.com/sponsors/posva"
},
"peerDependencies": {
"@vue/composition-api": "^1.4.0",
"typescript": ">=4.4.4",
"vue": "^2.6.14 || ^3.3.0"
},
"peerDependenciesMeta": {
"@vue/composition-api": {
"optional": true
},
"typescript": {
"optional": true
}
}
},
"node_modules/pinia/node_modules/vue-demi": {
"version": "0.14.10",
"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
"integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
"hasInstallScript": true,
"bin": {
"vue-demi-fix": "bin/vue-demi-fix.js",
"vue-demi-switch": "bin/vue-demi-switch.js"
},
"engines": {
"node": ">=12"
},
"funding": {
"url": "https://github.com/sponsors/antfu"
},
"peerDependencies": {
"@vue/composition-api": "^1.0.0-rc.1",
"vue": "^3.0.0-0 || ^2.6.0"
},
"peerDependenciesMeta": {
"@vue/composition-api": {
"optional": true
}
}
},
"node_modules/pirates": {
"version": "4.0.6",
"resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz",
@@ -5555,9 +5813,9 @@
}
},
"node_modules/pkg-types": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-1.1.3.tgz",
"integrity": "sha512-+JrgthZG6m3ckicaOB74TwQ+tBWsFl3qVQg7mN8ulwSOElJ7gBhKzj2VkCPnZ4NlF6kEquYU+RIYNVAvzd54UA==",
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-1.2.0.tgz",
"integrity": "sha512-+ifYuSSqOQ8CqP4MbZA5hDpb97n3E8SVWdJe+Wms9kj745lmd3b7EZJiqvmLwAlmRfjrI7Hi5z3kdBJ93lFNPA==",
"dependencies": {
"confbox": "^0.1.7",
"mlly": "^1.7.1",
@@ -6496,9 +6754,9 @@
"integrity": "sha512-6FtHJEvt+pVMIB9IBY+IcCJ6Z5f1iQnytgyfKMhDKgmzYG+TeH/wx1y3l27rshSbLiSanrR9ffZDrEsmjlQF2g=="
},
"node_modules/semver": {
"version": "7.6.2",
"resolved": "https://registry.npmjs.org/semver/-/semver-7.6.2.tgz",
"integrity": "sha512-FNAIBWCx9qcRhoHcgcJ0gvU7SN1lYU2ZXuSfl04bSC5OpvDHFyJCjdNHomPXxjQlCBU67YW64PzY7/VIEH7F2w==",
"version": "7.6.3",
"resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
"integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
"bin": {
"semver": "bin/semver.js"
},
@@ -7211,9 +7469,9 @@
}
},
"node_modules/ufo": {
"version": "1.5.3",
"resolved": "https://registry.npmjs.org/ufo/-/ufo-1.5.3.tgz",
"integrity": "sha512-Y7HYmWaFwPUmkoQCUIAYpKqkOf+SbVj/2fJJZ4RJMCfZp0rTGwRbzQD+HghfnhKOjL9E01okqz+ncJskGYfBNw=="
"version": "1.5.4",
"resolved": "https://registry.npmjs.org/ufo/-/ufo-1.5.4.tgz",
"integrity": "sha512-UsUk3byDzKd04EyoZ7U4DOlxQaD14JUKQl6/P7wiX4FNvUfm3XL246n9W5AmqwW5RSFJ27NAuM0iLscAOYUiGQ=="
},
"node_modules/ultrahtml": {
"version": "1.5.3",
@@ -7324,23 +7582,34 @@
}
},
"node_modules/unimport": {
"version": "3.7.2",
"resolved": "https://registry.npmjs.org/unimport/-/unimport-3.7.2.tgz",
"integrity": "sha512-91mxcZTadgXyj3lFWmrGT8GyoRHWuE5fqPOjg5RVtF6vj+OfM5G6WCzXjuYtSgELE5ggB34RY4oiCSEP8I3AHw==",
"version": "3.13.1",
"resolved": "https://registry.npmjs.org/unimport/-/unimport-3.13.1.tgz",
"integrity": "sha512-nNrVzcs93yrZQOW77qnyOVHtb68LegvhYFwxFMfuuWScmwQmyVCG/NBuN8tYsaGzgQUVYv34E/af+Cc9u4og4A==",
"dependencies": {
"@rollup/pluginutils": "^5.1.0",
"acorn": "^8.11.3",
"@rollup/pluginutils": "^5.1.2",
"acorn": "^8.12.1",
"escape-string-regexp": "^5.0.0",
"estree-walker": "^3.0.3",
"fast-glob": "^3.3.2",
"local-pkg": "^0.5.0",
"magic-string": "^0.30.10",
"mlly": "^1.7.0",
"magic-string": "^0.30.11",
"mlly": "^1.7.1",
"pathe": "^1.1.2",
"pkg-types": "^1.1.1",
"pkg-types": "^1.2.0",
"scule": "^1.3.0",
"strip-literal": "^2.1.0",
"unplugin": "^1.10.1"
"unplugin": "^1.14.1"
}
},
"node_modules/unimport/node_modules/acorn": {
"version": "8.12.1",
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.1.tgz",
"integrity": "sha512-tcpGyI9zbizT9JbV6oYE477V6mTlXvvi0T0G3SNIYE2apm/G5huBa1+K89VGeovbg+jycCrfhl3ADxErOuO6Jg==",
"bin": {
"acorn": "bin/acorn"
},
"engines": {
"node": ">=0.4.0"
}
},
"node_modules/universalify": {
@@ -7352,17 +7621,23 @@
}
},
"node_modules/unplugin": {
"version": "1.11.0",
"resolved": "https://registry.npmjs.org/unplugin/-/unplugin-1.11.0.tgz",
"integrity": "sha512-3r7VWZ/webh0SGgJScpWl2/MRCZK5d3ZYFcNaeci/GQ7Teop7zf0Nl2pUuz7G21BwPd9pcUPOC5KmJ2L3WgC5g==",
"version": "1.14.1",
"resolved": "https://registry.npmjs.org/unplugin/-/unplugin-1.14.1.tgz",
"integrity": "sha512-lBlHbfSFPToDYp9pjXlUEFVxYLaue9f9T1HC+4OHlmj+HnMDdz9oZY+erXfoCe/5V/7gKUSY2jpXPb9S7f0f/w==",
"dependencies": {
"acorn": "^8.11.3",
"chokidar": "^3.6.0",
"webpack-sources": "^3.2.3",
"webpack-virtual-modules": "^0.6.1"
"acorn": "^8.12.1",
"webpack-virtual-modules": "^0.6.2"
},
"engines": {
"node": ">=14.0.0"
},
"peerDependencies": {
"webpack-sources": "^3"
},
"peerDependenciesMeta": {
"webpack-sources": {
"optional": true
}
}
},
"node_modules/unplugin-vue-router": {
@@ -7393,6 +7668,17 @@
}
}
},
"node_modules/unplugin/node_modules/acorn": {
"version": "8.12.1",
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.1.tgz",
"integrity": "sha512-tcpGyI9zbizT9JbV6oYE477V6mTlXvvi0T0G3SNIYE2apm/G5huBa1+K89VGeovbg+jycCrfhl3ADxErOuO6Jg==",
"bin": {
"acorn": "bin/acorn"
},
"engines": {
"node": ">=0.4.0"
}
},
"node_modules/unstorage": {
"version": "1.10.2",
"resolved": "https://registry.npmjs.org/unstorage/-/unstorage-1.10.2.tgz",
@@ -8057,14 +8343,16 @@
"version": "3.2.3",
"resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.3.tgz",
"integrity": "sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==",
"optional": true,
"peer": true,
"engines": {
"node": ">=10.13.0"
}
},
"node_modules/webpack-virtual-modules": {
"version": "0.6.1",
"resolved": "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.6.1.tgz",
"integrity": "sha512-poXpCylU7ExuvZK8z+On3kX+S8o/2dQ/SVYueKA0D4WEMXROXgY8Ez50/bQEUmvoSMMrWcrJqCHuhAbsiwg7Dg=="
"version": "0.6.2",
"resolved": "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.6.2.tgz",
"integrity": "sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ=="
},
"node_modules/whatwg-url": {
"version": "5.0.0",


+ 4
- 1
package.json Visa fil

@@ -10,6 +10,7 @@
"postinstall": "nuxt prepare"
},
"dependencies": {
"@pinia/nuxt": "^0.5.5",
"axios": "^1.7.7",
"node-fetch": "^3.3.2",
"nuxt": "^3.12.3",
@@ -18,9 +19,11 @@
"vue-router": "^4.4.0"
},
"devDependencies": {
"@vueuse/core": "^11.1.0",
"@vueuse/nuxt": "^11.1.0",
"autoprefixer": "^10.4.19",
"postcss": "^8.4.39",
"sass": "^1.77.6",
"tailwindcss": "^3.4.4"
}
}
}

+ 2
- 2
pages/details/[id].vue Visa fil

@@ -15,11 +15,11 @@
{{ genre.name }}
</li>
</ul>
<!-- {{ film.vote_count }} -->
<!-- {{ film.release_date }} -->
{{ film.vote_average }}
{{ film.vote_count }}
</span>
<CommentForm :filmId="film.id" />
<CommentList :filmId="film.id" />
</section>
</template>



+ 20
- 0
stores/comment.ts Visa fil

@@ -0,0 +1,20 @@
import { defineStore } from 'pinia'
import { useLocalStorage } from '@vueuse/core'

export const useCommentStore = defineStore('comment', {
state: () => ({
comment: useLocalStorage('comment', [])
}),
hydrate(state, initialState) {
state.comment = useLocalStorage('comment', [])
},
actions: {
add(newComment) {
this.comment.push(newComment)
useLocalStorage('comment', this.comment)
},
},
getters: {
orderedComment: (state) => state.comment.sort((a, b) => b.added - a.added)
}
})

Skriv Förhandsgranska
Laddar…
Avbryt
Spara