Vue.js is a JavaScript framework for building user interfaces and single-page applications using a model-view-viewmodel architecture. It offers advantages like small size, flexibility, and detailed documentation, but has drawbacks such as a closed community and challenges with large projects. Vue can be utilized in various ways including standalone scripts, single-page applications, server-side rendering, and static-site generation.

1. WAYS OF USING VUE
Js
U
V
E
Indicator: NhanHV

2. What Is Vue.Js?
Vue.js is a JavaScript framework for
building user interfaces (UIs) and single-
page applications (SPAs).
- Vue.js uses a Model-View-ViewModel
(MVVM) architecture.
- Its ability to extend HTML attributes
using directives.
July 9, 2023
Vue was created and developed by Evan You while he
was an engineer at Google

3. 1. What Is Vue.Js?
2. Advantages and disadvantages
3. Ways of using Vue
PROBLEM
July 9, 2023

4. - VERY SMALL SIZE
- FLEXIBILITY
- SIMPLISTIC APPROACH
- FOCUS
- DETAILED DOCUMENTATION
- REACTIVITY
- COPYING COMPETITORS
- TWO-WAY COMMUNICATION
ADVANTAGES
July 9, 2023

5. DISADVANTAGES
July 9, 2023
- A CLOSED COMMUNITY DEVELOPMENT
- LACK OF SUPPORT FOR LARGE PROJECTS
- BEING TOO FLEXIBLE CAN BE PROBLEMATIC
- LANGUAGE BARRIERS
- LACK OF EXPERIENCED DEVELOPERS

6. 1DEALING WITH PROTOTYPES (WITHOUT TOO
MUCH SKILL)
2KEEPING THE FOCUS ON UI
3INTEGRATION DEMAND
WHAT IS VUE USED FOR?
July 9, 2023

7. July 9, 2023 Pitch deck

8. DEPENDING ON YOUR USE CASE, VUE CAN BE USED IN DIFFERENT
WAYS TO STRIKE THE OPTIMAL BALANCE BETWEEN STACK
COMPLEXITY, DEVELOPER EXPERIENCE AND END PERFORMANCE.
July 9, 2023

9. STANDALONE SCRIPT
July 9, 2023
 Vue can be used as a standalone script file - no build step required!
Can be used without a build step. Simply load it from a
CDN:
• Use to mark regions on the page that should be
controlled by .v-scope petite-vue
• The attribute makes the script execute after HTML
content is parsed .defer
• The attribute tells to automatically query and initialize
all elements that have on the page. init petite-vuev-
scope
petite-vue

10. EMBEDDED WEB COMPONENTS
July 9, 2023
 The resulting web components can be embedded in legacy applications, static HTML, or even
applications built with other frameworks.
 Vue supports creating custom elements
using exactly the same Vue component
APIs via the defineCustomElement
method.
 The method accepts the same argument
as defineComponent, but instead returns
a custom element constructor that
extends: HTMLElement
Can be embedded in any HTML page

11. SINGLE-PAGE APPLICATION (SPA)
July 9, 2023
A single-page application (SPA) is a web application or website that interacts
with the user by dynamically rewriting the current web page with new data
from the web server, instead of the default method of a web browser loading
entire new pages. The goal is faster transitions that make the website feel
more like a native app.
Web browser JavaScript frameworks and libraries, such as AngularJS, Ember.js, ExtJS,
Knockout.js, Meteor.js, React, Vue.js, and Svelte have adopted SPA principles.

12. FULLSTACK / SSR
July 9, 2023
Vue.js is a framework for building client-side applications. By default, Vue
components produce and manipulate DOM in the browser as output.
However, it is also possible to render the same components into HTML strings
on the server, send them directly to the browser, and finally "hydrate" the
static markup into a fully interactive app on the client.
VUE SSR SSR - Server-Side Rendering

13. July 9, 2023
1. Create a new directory and into it -cd
2. Run npm init -y
3. Add in so that Node.js runs in ES modules mode.
"type": "module“ package.json.
4. Run npm install vue
We can then move the Vue SSR code into a server request
handler, which wraps the application markup with the full page
HTML. We will be using express for the next steps:
5. Run npm install express
6. Create the following file: server.js
Finally, run: node server.js . You should see the page
working with the button. http://localhost:3000

14. JAMSTACK / SSG
July 9, 2023
• We can pre-render an entire application into HTML and serve them as static
files. This improves site performance and makes deployment a lot simpler since
we no longer need to dynamically render pages on each request.
• This technique is commonly referred to as Static-Site Generation (SSG), also
known as JAMStack.
• The Vue team also maintains a static-site generator called VitePress
(SSG - Static-Site Generation)
VitePress
VuePress

15. BEYOND THE WEB
July 9, 2023
 Build desktop apps with Electron or Tauri
 Build mobile apps with Ionic Vue
 Build desktop and mobile apps from the same codebase with Quasar
 Use Vue's Custom Renderer API to build custom renderers
targeting WebGL or even the terminal!

16. THANK YOU
July 9, 2023

17. July 9, 2023 Pitch deck