Tweak twig with awesome Vue.js by Tejomay Saha Cdn for includung vue.js into you dom easily (makes...

Tweak twig with awesome

Vue.jsby Tejomay Saha

Tweak twig with awesome

Vue.jsby Tejomay Saha

Hello!I am Tejomay Saha@tejomayonline

I am here as I love learning and expressing new

techs stuffs to ease coding.

Working at Srijan Technologies pvt. Ltd.

As a Full Stack Developer

1.What is vue?

“Vue.js (pronounced /vju /, like view) is a

library for building interactive web interfaces

Why using vue.js?

○ Reactive data binding

○ Composable view component

○ Mix and match small library

○ Progressive framework! (router, resource/ajax stuff, state management and many more)

○ Simple API (easy to learn)

○ Lightweight

○ Rapid grow community

Vue based on MVVMWhat is MVVM and reactive?

Vue flow of MVVM

Start with vue

Use <script src="https://unpkg.com/vue"></script>

Cdn for includung vue.js into you dom easily

<div id="app"> (makes you dom bind to

vue with script )

………………..

</div> <script>

new Vue({

el: '#app'})

</script>

Reactive vue(jsfiddle link)

1.tree dynamic view(https://goo.gl/Qrt44N)

2.markdown(https://goo.gl/yi57Hk)

3.latest github commits(https://goo.gl/mKyx4H)

4.grid component(https://goo.gl/vMgBT1)

5.modal component(https://goo.gl/4QXYEU)

6.todos(https://goo.gl/7AMCYW)

Vue v/s React v/s

Angular★ Performance★ Learning Curve★ Purpose★ Architecture★ Scaling up/down★ Ease factor

Every component is responsible for

managing a piece of DOM

Content

Sidebar

The entire UI can be abstracted into

a tree of components

Custom reusable nested vue components

<fab-button> </fab-button><tabs> <inner-tab></inner-tab> <inner-tab></inner-tab> <inner-tab></inner-tab></tabs>

large scale management with vue

Vue code flow

● Imported as a ES2015 module (thus easily testable)

● Collocation of Template, Logic & Style

● Just use what you already know: HTML, CSS & JavaScript

● Embedded pre-processor support: seamlessly use Babel, SASS or even Pug in the same file

● Component-scoped CSS with a single attribute

Vue tools & extras

● Vue-cli for command line first development.

● Official chrome dev tools for vue support.

● Awesome vue.js community.● Built in Laravel support from Laravel

5.3.● Tiny learning curve.● Based on between react virtual dom

and angular data binding.● Awesome for building ui

components,animations.● 2 way data binding looks like realtime.● etc.

Vue with Drupal8/7

★ We can easily blend vue.js with twig templating with the cdn or else

★ Using npm dependencies.★★ We can use it in .tpl files

directly.★★ We can use in custom module

development★★ Creating Reactive theme with

Sources

● Google● Evan you’s slides.● Muhammad Rizki Rijal ● Toshiro Shimizu ● etc.

Thanks!Any questions?You can find me at @tejomayonline