Kombinace frameworků Nette a Vue bez nutnosti buildu (node.js/webpack). Určeno pro malé projekty a testovací účely.
Vue komponenty jsou za pomocí knihovny http-vue-loader stahovány a poté načteny rovnou na klientské části aplikace bez pomoci Node.js nebo jakéhokoliv jiného builderu:
new Vue({
el: '#app',
components: {
'my-component': httpVueLoader('/client/components/MyComponent.vue')
}
});Ve výchozím stavu jsou všechny komponenty umístěny ve složce www/client/components. Samotné komponenty podporují SASS a rovněž i atribut scoped.
Komponenty pochopitelně neumožňují použití šablonovacího systému latte . Vue má své vlastní funkcionality pro psaní šablon (jako např. filtry a direktivy) a není to tedy problém do doby, než potřebujeme vytvořit odkaz na presenter. Pro tyto účely obsahuje šablona komponentu NLink:
<n-link to="Homepage:default" :params="{ id: 1, chapter: 7 }" anchor="heading">Odkaz</n-link>Komponenta je poté přeložena na:
<a href="https://web.cz/homepage/default/1?chapter=7#heading">Odkaz</a>Všechny scripty ve složce www/client/model a všechny scripty v podadresářích této složky jsou automaticky stahovány a poté injectnuty do globálního scopu aplikace. Aby nedošlo k zahlcení globálního scopu a k jmenným konfliktům, doporučuji ukládat modelové třídy do předpřipravené vlastnosti model:
// Modelová třída pes
window.model.dog = class {
}Použití uvnitř Vue komponenty je pak následovné:
// Načteme modelovou třídu pes
const Dog = window.model.dog;
// Použití třídy
let dog = new Dog();Veškerá logika je umístěna v zaváděcím souboru bootstrap.js v kořeni složky www.
Šablona obsahuje předpřipravený ApiPresenter, jež je zodpovědný za generování odkazů a hledání modelových tříd.
| Jméno | Odkaz |
|---|---|
| Axios | https://github.com/axios/axios |
| Sass compiler | https://github.com/medialize/sass.js/ |
| Vue | https://github.com/vuejs/vue |
| Http-vue-louder | https://github.com/FranckFreiburger/http-vue-loader |