Vite a Vue.js funkčý príklad

jaro
Člen | 12
+
0
-

Zdravím,

Chcem sa opýtať či nemá niekto na githube funkčný príklad s Vite a Vue js?
Bojujem s tým pár hodín a neviem ako to rozchodiť…
Určite by to privítalo viacej ľudí z komunity.

Ďakujem.

nightfish
Člen | 268
+
0
-

@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
+
0
-

Čí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
+
0
-

Našiel som nakoniec toto https://github.com/…e-nette-camp snáď mi to trochu pomože ako inšpirácia…

MajklNajt
Člen | 426
+
+1
-

@jaro možno ti ešte pomôže aj tento rýchlokurz na Vue+Vite https://www.youtube.com/watch?…

jaro
Člen | 12
+
0
-

Ďakujem, pozriem ale skúsil som to skombinovať dokopy a vyzerá, že ako “npm run dev” by išlo na localhoste ale nedarí sa mi skompilovat buid pravdepodobne chýbajú nejaké časti čo budú kompilovať *.vue súbory pri produkcii s “npm run build” v vite.config.js.

Kcko
Člen | 383
+
0
-

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.

jaro
Člen | 12
+
0
-

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..

Editoval jaro (11. 2. 19:12)

Kcko
Člen | 383
+
0
-

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
+
0
-

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. 13:06)

Felix
Nette Core | 1163
+
0
-

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.

jaro
Člen | 12
+
0
-

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. 15:54)

Kcko
Člen | 383
+
0
-

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 | 383
+
0
-

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 | 15
+
+2
-

Já bych se osobně určitě Vue CLIVue 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 | 15
+
+2
-

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. 19:47)

jaro
Člen | 12
+
0
-

Ďakujem, pre začiatočníka veľmi užitočné, je tam veľký starting point kde treba načerpať veľa informacií aby sa to podarilo rozbehať ako treba, skúsim to aj s produkčným buildom a pozriem ako by sa to dalo riešiť…