DEV Community: Lenildo Luan

Creating a Vue Application with CDN setup

Lenildo Luan — Mon, 18 Dec 2023 20:49:06 +0000

Vue.js isn't called "The progressive JavaScript Framework" for nothing. They are called that because you don't need to install a lot of npm packages and recreate your entire project in a new framework. If you have an existing website and need to add some interactive features to it, just add the Vue.js by script tag and use it in your page. How to do that? Let's see in this post.

Using Vue from a CDN (Content Delivery Network) means that instead of downloading and hosting the Vue.js library on your server, you include it in your web project by linking to a version hosted on a CDN. This technique offers several advantages for vanilla web projects that want to add more complex user interfaces or modernize their code. Furthermore, another reason for using this method:

Speed and Performance: CDNs are optimized for delivering content efficiently. They often have servers all over the world, ensuring that your users download Vue.js from a location close to them, reducing load times.
Ease of Use: It's straightforward to include Vue in your project. You just need to add a <script> tag in your HTML file that points to the Vue.js CDN link.
No Installation Required: There's no need to install Vue using npm or yarn, which can be beneficial for small projects or for learning purposes.

However, there are also downsides to using a CDN:

Reliance on external service: Your project's functionality might be compromised if the CDN goes down or has issues.
Limited control: You have less control over the version of Vue being used, unless you specify a particular version in the CDN link.
Not Ideal for larger projects: It's often better to install Vue locally to have more control over the environment and to use Vue's powerful development tools.

To use Vue from a CDN, just add a script tag with they src pointed to URL where is located the Vue.js file:

  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

  <div id="app">{{ message }}</div>

  <script>
    const { createApp, ref } = Vue

    createApp({
      setup() {
        const message = ref('Hello vue!')
        return {
          message
        }
      }
    }).mount('#app')
  </script>

The example above adds Vue to the project and creates a hello world app to validate if the framework as imported successfully.

Concluding

In conclusion, using Vue.js via a CDN is a convenient and efficient way to modernize an existing web project or to add interactive features without the complexities of a full framework installation. By adding just a few lines of code, you can significantly enhance your web application, making Vue.js a versatile and accessible tool for web developers of all skill levels.

In the next post, we'll explore the Hello World example and understand every aspect of this coding. See you there!

Creating a Vue Application with build setup

Lenildo Luan — Thu, 07 Dec 2023 12:18:02 +0000

A build setup for Vue.js refers to a configuration or tooling environment that prepares a Vue.js application for development and production. This setup typically involves tools and processes that handle various tasks like transpiling modern JavaScript code, bundling assets, optimizing performance, and automating workflows. The goal is to streamline the development process, enhance performance, and ensure that the application is deployable across different environments. In this post, we'll learn how to create a Vue application using the build setup.

Why using the build setup

Using a build setup for a Vue.js project brings several benefits, especially for medium to large-scale applications or when developing sophisticated single-page applications (SPAs). A build setup typically involves tools like Webpack, Vite, or Vue CLI, which help in automating and optimizing various aspects of the development process.

Key reasons for using a build setup in Vue.js development include:

Transpilation and Polyfills: Modern JavaScript (ES6+) offers many advantages but isn't fully supported in all browsers. A build setup can transpile this modern JavaScript code to ES5, which is widely supported. It can also add polyfills for features not supported by certain browsers, enhancing cross-browser compatibility.
Module Bundling: Vue.js applications often consist of many separate files and modules. A build tool can bundle these files into fewer, optimized files, reducing the number of HTTP requests and improving load times.
Optimizations: Build tools can perform various optimizations like minifying code (removing unnecessary characters from source code without changing its functionality) and tree shaking (removing unused code), leading to smaller bundle sizes and faster application performance.
Hot Module Replacement (HMR): During development, HMR allows for immediate feedback in the browser when a file is modified, without needing a full page reload. This speeds up development and makes it more convenient.
Environment Variables and Modes: Build setups can manage environment variables and different modes (development, production, testing), allowing you to tailor the application’s behavior and configuration to the current environment.
Sass/Less/Stylus Support: Many Vue developers prefer using pre-processors like Sass, Less, or Stylus for styling. Build tools can easily integrate these pre-processors, compiling their specific syntax into standard CSS.
File Loader Configuration: Build setups allow for advanced configurations for handling different file types. For example, they can include loaders to import images and fonts directly in JavaScript and Vue components.
Single-File Components (SFCs): Vue’s Single-File Components (.vue files) are a core feature for Vue.js development. A build setup is required to parse these files into an application, as browsers don’t understand .vue files natively.
Ease of Integration: Build tools make it easier to integrate with other tools and libraries like ESLint for linting, Babel for additional JavaScript features, and various plugins for extended functionalities.
Scalability: As applications grow, the complexity of managing dependencies, assets, and optimizations increases. A build setup helps in scaling the application by maintaining an organized and efficient workflow.

Let's create our app

To scaffold a Vue Single Page Application (SPA) on your local machine using a build setup that supports Vue Single-File Components (SFCs) using Vite, you can follow these steps:

Install Node.js version 16 or higher.
Open your terminal in the fold where you want to create your project.
Run the following command to install and execute create-vue, the official Vue project scaffolding tool.

npm create vue@latest

After this command, will appear several options features to add in you project.

✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add an End-to-End Testing Solution? … No / Cypress / Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes

If you unsure about any of then, choose No. But as they are all extremely important, let's see a little about each one of them:

TypeScript: is an open-source programming language developed and maintained by Microsoft. It is a strict syntactical superset of JavaScript, meaning that any valid JavaScript code is also valid TypeScript code. TypeScript adds optional static typing to JavaScript, which can help catch errors early through a type system and improve the developer experience with features like code completion and intelligent refactoring.
JSX (JavaScript XML): is a syntax extension for JavaScript, primarily used with React, a popular JavaScript library for building user interfaces. JSX allows you to write HTML elements in JavaScript and place them in the DOM without any createElement() and appendChild() calls. It provides a way to structure component rendering using a syntax familiar to many developers, especially those with experience in HTML and JavaScript.
Vue Router: is the official routing library for Vue.js. It is used for building single-page applications (SPAs). Vue Router seamlessly integrates with Vue.js and allows developers to define routes and navigate between different components within a Vue application. It provides a way to manage navigation and rendering of components based on the browser's URL.
Pinia: is a modern state management library for Vue.js applications. It serves as an alternative to Vuex, the official state management library for Vue. Pinia was designed with simplicity and flexibility in mind, offering a more straightforward and enjoyable development experience compared to Vuex, especially when working with Vue 3.
Vitest: is a modern, fast unit test framework tailored specifically for Vue.js applications, although it can be used with any JavaScript or TypeScript project. It is designed to work out-of-the-box with Vite, a build tool that aims to provide a faster and leaner development experience for modern web projects.
End-to-end (E2E) testing: is a software testing methodology used to validate the entire workflow or process of an application from start to finish. The goal of E2E testing is to simulate real user scenarios and ensure that the system as a whole functions as expected. This type of testing is conducted in an environment that closely mirrors the production environment where the application will be deployed.
ESLint: is an open-source JavaScript linting utility, which is a type of tool used to analyze code for potential errors, stylistic issues, and adherence to certain coding standards. It was created by Nicholas C. Zakas in 2013 and has since become one of the most popular linting tools in the JavaScript ecosystem.
Prettier: is an open-source code formatter for JavaScript, TypeScript, CSS, HTML, JSON, and many other languages. It is designed to enforce a consistent code style across an entire project by automatically formatting code according to a set of rules. Prettier takes your code and reprints it in a consistent style, aiming to improve the readability and maintainability of the codebase.

After the options on prompt finish, the project will be created in a fold with the name you give to them. Let's open the fold with this command on terminal:

cd <your-project-name>

Once in the project folder, let's install the project dependencies:

npm install

Finally, run the project on the browser:

npm run dev

This command will create a local server that runs the project on port 5174 of your machine, and can be accessed through this link http://localhost:5174/. It's important to note that when you change anything in the project, automatically the change will appear in the browser, facilitating the process of learning and development.

Congratulations! Now you create and run your first Vue.js 3 project! If you don't have choice an IDE, the official recommendation is Visual Studio Code (VSCode) + Volar extension. When you finish having fun with your project and want to put it into production, you can run the command below to build the project and all the files will be found in ./dist folder.

npm run build

Concluding

In this, we post to learn about how to create a Vue Application with a build setup. In the next posts, we'll learn about another way to create a Vue application. See you there.

Introduction to Vue.js 3

Lenildo Luan — Wed, 06 Dec 2023 13:21:40 +0000

Vue.js, the progressive framework, often simply referred to as Vue, is a progressive JavaScript framework used for building user interfaces. Primarily focused on the view layer (the front-end), it enables developers to create rich and interactive web applications. In this post we'll learn a little about the history of Vue and its main features.

History

Vue.js was created by Evan You after working at Google using AngularJS in several projects. He found the need for a lightweight framework that combined the best aspects of Angular (such as data-binding and a component-based approach) with a simpler learning curve.

Over time, Vue gained popularity due to its simplicity, detailed documentation, and gentle learning curve. It evolved with contributions from the community and additional features like the Vue Router and Vuex for state management. Vue was first released in February 2014, Vue 2.0, released in 2016, brought significant improvements, and Vue 3.0, released in 2020, introduced the Composition API, further enhancing its capabilities. Vue's growth has been organic, driven by the community and its user-friendly approach to front-end development. You can see more about the history of Vue in their documentary.

Vue.js, as of 2023, has solidified its position as a significant player in the world of JavaScript frameworks:

Competitive Standing: Vue.js frequently competes with React.js for the top spot in terms of popularity among front-end frameworks. These two frameworks often switch positions in categories like "most loved," "most used," and "most popular" in the developer community. Ref.
Market Share: In the JetBrains State of Developer Ecosystem report for 2023, Vue.js emerged as a noteworthy contender, capturing a 32% share. This significant market presence underscores its increasing adoption and relevance in the developer ecosystem. Ref.
Popularity Factors: Several reasons contribute to Vue.js's popularity. It is recognized as the go-to progressive JavaScript framework for creating feature-rich single-page applications and user interfaces. The framework's easy-to-learn nature, with its gentle learning curve, makes it accessible for developers new to JavaScript and front-end development. Ref1, Ref2.

Vue.js's rise in popularity can be attributed to its approachable learning curve, flexibility, and effectiveness in building complex, modern web applications. It's designed to be incrementally adoptable, which means that it can be easily integrated into existing projects, and its component-based architecture allows for better code organization and reuse. These features make Vue.js a compelling choice for both new and experienced developers in the web development realm.

The framework

Vue is known for its simplicity and flexibility, offering a declarative and component-based programming model. This model helps efficiently develop both simple and complex user interfaces. Vue builds on top of standard HTML, CSS, and JavaScript, making it easy to integrate into projects and for developers with knowledge of these technologies to learn Vue quickly. Let's see the key features of them.

Progressive approach

They are termed "The Progressive Framework" because of their design philosophy, which allows for incremental adoption and flexibility. This means that developers can start using Vue in a small part of their project, like enhancing static HTML with interactive features, and then progressively integrate more of Vue's features and capabilities as needed. This approach makes Vue adaptable to a wide range of projects, from simple to complex applications. The framework grows with the developer's needs, making it suitable for both beginners and experienced developers tackling larger-scale projects.

Single-File Components (SFCs)

Single-File Components (SFCs) in Vue are a defining feature where a Vue component is encapsulated in a single file. These files, typically with a .vue extension, contain three types of code blocks:

Template Block: Contains the HTML structure of the component.
Script Block: Includes the JavaScript logic, where you can define data, computed properties, methods, lifecycle hooks, etc.
Style Block: Houses the CSS styles specific to the component. These styles can be scoped to the component, preventing them from affecting other elements in the application.

This structure brings a modular approach to building web applications, making components more organized, maintainable, and reusable. Each SFC encapsulates its structure, behavior, and style in one cohesive file, streamlining development and aiding in understanding how each part of the application UI works.

API styles

In Vue, there are two primary API styles for authoring components:

Options API: This is the classic Vue API, where you define a component's logic using an object with options like data, methods, computed, and lifecycle hooks. These options help structure the code and make it more readable, especially for those familiar with object-oriented programming.
Composition API: Introduced in Vue 3, this API is more function-based. It provides a more flexible way to organize component logic by using reactive states and functions. The Composition API is particularly useful for complex components, as it makes it easier to extract, share, and manage reactive logic.

Both APIs are fully capable and are built on the same reactivity system. Choosing between Vue's Options API and Composition API depends on your project's needs and your familiarity with Vue or programming concepts. Let's see which one to choose.

Options API:

Best for: Beginners or developers more comfortable with a more structured, object-oriented approach.
Reasons to Choose: It's easier to understand for those new to Vue or front-end frameworks. It abstracts away the reactivity details and enforces a more organized code structure.

Composition API:

Best for: Large-scale applications or when managing complex component logic.
Reasons to Choose: Offers more flexibility and better code reusability. It's beneficial for advanced users who need fine-grained control over reactive dependencies and want to compose logic across different components.

In general, if you're new to Vue or prefer a more structured approach, start with the Options API. If you're dealing with complex state management or building large applications, the Composition API might be more suitable.

Concluding

In this post learn a little about the history of Vue and its main features. In the next two posts, we'll learn about the two ways to create a Vue application. See you there.