Vite a Vue.js funkčý príklad
- nightfish
- Člen | 519
@jaro Četl jsi https://blog.nette.org/…okalni-vyvoj? V něm je odkázané repo https://github.com/…z/nette-vite
- jaro
- Člen | 12
Čítal som to aj som to rozchodil, ale nedarí sa mi pridať Vue.js vôbec,
strašne málo príkladov je na rozchodenie Vue.js alebo podobného js
frameworku.
Skúšal som pridať inicializáciu do main.js ale neprešlo mi to, pritom
v ostatných frameworkoch je aspoň dosť dokumentácie a vzorových projektov,
toto mi trocha chýba, nejaké best practices alebo vzorové jednoduché
príklady…
- jaro
- Člen | 12
Našiel som nakoniec toto https://github.com/…e-nette-camp snáď mi to trochu pomože ako inšpirácia…
- MajklNajt
- Člen | 502
@jaro možno ti ešte pomôže aj tento rýchlokurz na Vue+Vite https://www.youtube.com/watch?…
- Kcko
- Člen | 470
jaro napsal(a):
Našiel som nakoniec toto https://github.com/…e-nette-camp snáď mi to trochu pomože ako inšpirácia…
Tohle řešení je pro VUE 2, což snad dneska už používat nechceš ne? Resp tam nevidím ani propojení Nette a Vue (díval jsem se v rychlosti).
Ale tak nainstalovat VUE appku s Vite by neměl být problém a Nette budeš beztak používat jako API na REST endpointy ne? Tak si ho dáš do samostatného adresáře nebo na subdoménu.
- Kcko
- Člen | 470
jaro napsal(a):
To neviem, ja som vychádzal z toho ze to použijem nejako podobne ako v laravel frameworku ale to asi tak nejde…
Že budem mať jeden projekt spojený s web app aj vue app..
Nevím jestli jsi koukal na Vue kurz od Yablka (Roman Hraška), mě Laravel nezajímá, takže tu sekci jsem velmi rychle prolítnul, takže si nepamatuji, jak to udělal. Ale co Ti brání mít v rootu klasickou Vue instanci (aplikaci) a v subadresáři nebo na subdoméně mít Nette a používat na Endpointy?
Já bych to asi tak dělal, protože si teď nedovedu představit, jak skloubit obě prostředí dohromady v 1 adresáři (ale není to ani potřeba ne?)
- jaro
- Člen | 12
Hej, urobím to tam ako píšeš, robil som iba pár aplikácii v laraveli s vue a chcel som prerobiť jednu do starú v nette nového prostredia s vite skeletonom ale asi som to poriadne nepochopil. Skusím to skôr založiť na https://github.com/…tte-skeleton a zvyšok mať oddelený v subdomene…
Editoval jaro (12. 2. 2022 13:06)
- jaro
- Člen | 12
Ok, po pozretí videa, sa mi to čiastočne podarilo rozchodiť Vite s Vue3 HelloWorld komponentou ale vyvstala otázka ako riešiť assety v komponentoch ako logo.png v HelloWorld komponente, ako to zaradiť do assetov po builde a hlavne v komponente aby sa odkazovala na dane logo ktore by sa malo objaviť v www/assets
Editoval jaro (12. 2. 2022 15:54)
- Kcko
- Člen | 470
Felix napsal(a):
Tohle řešení je pro VUE 2, což snad dneska už používat nechceš ne?
Vue 2 je porad dobra volba. Je uplne v poradku zacit s Vue 2. Nebal bych se toho.
Ahoj, no jako je to rozhodně lepší než koukat na Ordinaci v Růžové zahradě ;), ale spousta věcí se ve Vue 3 změnila oproti 2ce, přibylo např. Composition API a není moc důvod, pokud člověk začíná, začínat s dvojkovou verzí ne?
Ten tvůj projekt, na který tady odkázal @jaro, co to přesně mělo být? Nevšiml jsem si tam žádného propojení, jen 2 samosatných adresářů, není tam README, to byl jen nějaký pokus jak se VUE aplikace dotázat skrze Nette na data ne?
- Kcko
- Člen | 470
jaro napsal(a):
Ok, po pozretí videa, sa mi to čiastočne podarilo rozchodiť Vite s Vue3 HelloWorld komponentou ale vyvstala otázka ako riešiť assety v komponentoch ako logo.png v HelloWorld komponente, ako to zaradiť do assetov po builde a hlavne v komponente aby sa odkazovala na dane logo ktore by sa malo objaviť v www/assets
Nepoužívám Vite (resp. jednou jsem ho zkusil, protože ta rychlost byla skvělá oproti Vue Cli, ale pak jsem tam měl nějaké problémy a padalo mi to do divných hlášek a pořádně mi to neukázalo v čem je problém, tak jsem to zahodil.
Tohle za tebe vyřeší zmíněný Vue CLI, které má produkční build.
Vyzkoušej si i NUXT (https://nuxtjs.org/), který je připravený, abys nemusel řešit věci jako SEO, SSRR, ruční načítání kompoment atd. Je to takové Nette ve Vue.
- evromalarkey
- Nette Blogger | 20
Já bych se osobně určitě Vue CLI i Vue 2 vyhnul obloukem. Minulý týden se z Vue 3 stala hlavní verze Vue, včetně dokumentace a Vite je doporučeno používat před Vue CLI – https://vuejs.org/…tooling.html#…
Co se týká použití nette-vite, tak tam se jedná o propojení použití
s vykreslováním šablon přes PHP, takže jde o něco jiného. Pokud chceš
Vue, tak ti stačí do nette projektu přidat všechny soubory co se ti
vytvoří přes npm create vite@latest a ve vite.config.js si
změnit jen outDir cestu do www (https://vitejs.dev/config/#…), pak ti bude vše fungovat
(i zmíněné assety)
Ale jak už tady padlo tak může být lepší rozdělit to do dvou adresářů, jinak by si musel např. přes htaccess odlišovat jestli se má náčíst index.html nebo index.php (např. na andrese /api odkazovat na index.php)
- evromalarkey
- Nette Blogger | 20
Tady jsem ještě udělal example jak lze teda použít i kombinaci, rendrovat přes PHP a initnout Vue aplikaci uvnitř .latte šablony
https://github.com/…ree/vue-vite
Jediný kde je problém jsou assety, protože prohlížeč nemá přístup do
/src, to lze buď vyřešit tak že se jako root složka na serveru
použije root projektu a přidá se následující rewrite
RewriteRule ^(?!src/)(.*)$ www/$1 [L] nebo by se musel udělat
rewrite na /src přímo v htaccessu ve www
EDIT: tak jsem to vyřešil i na straně vite.config.js, cesty
/src se transformují na http://localhost:3000 (viz.
https://github.com/…/issues/2394#…)
Editoval evromalarkey (15. 2. 2022 19:47)