Build Vue apps the right way using Vue CLI 3. Understand how the building blocks of Vue CLI 3 work including npm, webpack, babel, eslint, plugins, GUI, testing, and SCSS. Import third-party libraries and maintain your project.

Key Features

• Learn to work with Vue CLI 3 both on the command line and with a GUI
• Manage VueJS apps, settings, Vue plugins, and third-party libraries
• Learn how to build Vue apps from scratch using webpack, babel, ES6, vue-router, Jest, Cypress, SCSS, and Git

Book Description

The sprawling landscape of various tools in JavaScript web development is becoming overwhelming. This book will show you how Vue CLI 3 can help you take back control of the tool chain. To that end, we'll begin by configuring webpack, utilizing HMR, and using single-file .vue components. We'll also use SCSS, ECMAScript, and TypeScript. We'll unit test with Jest and perform E2E testing with Cypress.

This book will show you how to configure Vue CLI as your default way of building Vue projects. You'll discover the reasons behind using webpack, babel, eslint, and other modern JavaScript toolchain technologies. You'll learn about the inner workings of each through the lens of Vue CLI 3. We'll explore the extendibility of Vue CLI with the built-in settings, and various core and third-party plugins.

Vue CLI helps you work with Vue components, routers, directives, and services in the Vue ecosystem. While learning these concepts, you'll examine the evolution of JavaScript. You'll learn about use of npm, IIFEs, modules in JavaScript, Common.js modules, task runners, npm scripts, module bundlers, and webpack. You'll get familiar with the reasons why Vue CLI 3 is set up the way it is. You'll also learn to perform linting with ESLint and Prettier.

Towards the end, we'll introduce you to working with styles and SCSS. Finally, we'll show you how to deploy your very own Vue project on Github Pages.

What you will learn

• Work with nvm, install Node.js and npm, use Vue CLI 3 with no configuration, via the command line and the graphical user interface
• Build a Vue project from scratch using npm and webpack, and learn about hot module replacement
• Work with Babel settings, configurations, and presets
• Work with Vue plugins, including testing plugins such as Jest and Cypress
• Write, run, and watch unit and E2E tests using TDD assertions in the red-green-refactor cycle
• Work with Vue router and use, nested, lazy-loading, and dynamic routes
• Add SCSS to your projects and work with third-party Vue plugins
• Deploy your Vue apps to Github Pages

Who this book is for

This book is for existing web developers and developers who are new to web development. You must be familiar with HTML, CSS, and JavaScript programming. Basic knowledge of the command line will be helpful but is not necessary.

Table of Contents

1. Introducing Vue CLI 3
2. Webpack in Vue CLI 3
3. Babel in Vue CLI 3
4. Testing in Vue CLI 3
5. Vue CLI 3 and routing
6. Using ESLint and Prettier in Vue CLI 3
7. Improving CSS with SCSS
8. Deploying Vue CLI 3 apps on Github Pages

Key Features

• Packed with easy-to-follow recipes on building responsive web pages with Bootstrap 4 that can be applied to a web project of your choice
• Build intuitive user interfaces that are mobile-ready with the latest features offered by BS4
• Stay on top of the changes that Bootstrap 4 brings to front-end development
• Craft beautiful UIs and learn best practices, tips and tricks for quick, effortless, and proper Bootstrap 4 development

Book Description

Bootstrap, one of the most popular front-end frameworks, is perfectly built to design elegant, powerful, and responsive interfaces for professional-level web pages. It supports responsive design by dynamically adjusting your web page layout.

Bootstrap 4 is a major update with many impressive changes that greatly enhance the end results produced by Bootstrap. This cookbook is a collection of great recipes that show you how to use all the latest features of Bootstrap to build compelling UIs.

This book is using the most up-to-date version of Bootstrap 4 in all its chapters. First off, you will be shown how you can leverage the latest core features of Bootstrap 4 to create stunning web pages and responsive media. You will gradually move on to extending Bootstrap 4 with the help of plugins to build highly customized and powerful UIs.

By the end of this book, you will know how to leverage, extend, and integrate bootstrap to achieve optimal results for your web projects.

What you will learn

• Craft beautiful UIs the right way
• Use jQuery and JavaScript to extend Bootstrap layouts
• Become more efficient by speeding up your workflow to achieve amazing results in the shortest time possible
• Setup your environment for future changes of the framework.
• Stay DRY by quickly prototyping Bootstrap-based websites with the help of Github's own serverless blogging platform, Jekyll
• Integrate Bootstrap with the most popular JS frameworks, Angular and React
• Combine Bootstrap with the .NET platform

About the Author

Ajdin Imsirovic has been working with frontend technologies, as well as web and print design, for almost 2 decades. He is an accomplished video course creator and an author of a wildly popular video course series on Bootstrap development. He is dedicated to making the learning of the practical use of HTML, CSS, and JavaScript technologies with Bootstrap easy and fruitful. In his Bootstrap 4 Cookbook, he brings together all his experience while teaching Bootstrap development to make a must-read guide to the newest version of Bootstrap.

Table of Contents

1. Installing Bootstrap 4 and Comparing Its Versions
2. Layout Like a Boss with the Grid System
3. Power Up with the Media Object, Text, Images, and Tables
4. Diving Deep into Bootstrap 4 Components
5. Menus and Navigations
6. Extending Bootstrap 4
7. Make Your Own jQuery Plugins in Bootstrap 4
8. Bootstrap 4 flexbox and Layouts
9. Workflow Boosters
10. Creating a Blog with Jekyll and Bootstrap 4
11. Bootstrap 4 with ASP.net Core
12. Integrating Bootstrap 4 with React and Angular

Explore why ELM is a great alternative to using pure JavaScript and other JS-based solutions by building complete apps and websites.

Key Features

• Develop your own scalable and modular web applications with Elm to make web development less messy compared to your JavaScript apps
• Create personal portfolio website, a weather application, and a unit conversion website, and integrate your Elm apps with Rails 5
• Boost the performance of your application with no runtime exceptions and JavaScript interoperability

Book Description

Web development with JavaScript usually involves dealing with performance and maintenance issues. JavaScript fatigue makes it difficult for many developers to keep up with the increasing complexity posed by the multitude of JavaScript frameworks with changing versions, and the need to use different tools such as task runners, module bundlers, compilers, testing suites, linting and debuggers. Elm is an easy-to-learn, functional programming language that simplifies web development by eliminating the complexity associated with using JavaScript for web development. Elm is a statically typed language and thus makes a front end web developer's life easier by preventing run-time errors.

You will begin by seeing the bigger picture of where Elm fits into the web development world and learning the basics of Elm programming. Firstly, you will get a taste for web development with Elm by developing a simple fizz-buzz app. Next you will get hands-on with advanced Elm concepts as you develop your own personal blogging website, a unit conversion app and a weather app with Elm. Finally, you will also learn how to integrate Elm with a Rails 5 app with the help of Webpack. By the end of the book you will have learned Elm programming, and its applications, and will appreciate how Elm simplifies web development for you.

What you will learn

• Programming with the Elm language, its syntax and core concepts
• Using Elm for front end web development projects
• Developing complete websites with Elm
• Decoding JSON into Elm
• Integrating Elm with the standard front end web development technologies
• Integrating Elm with back-end frameworks
• Testing your applications in Elm

Who this book is for

This book is for frontend web developers who want to learn a simpler way of developing their applications. A knowledge of the basics of CSS and Bootstrap is required.

Table of Contents

1. Why this is a great time to learn Elm?
2. Developing your first program with Elm
3. Creating your personal portfolio with Elm
4. Preparing a Unit Conversion Website in Elm
5. Completing a Unit Conversion Website in Elm
6. Exploring Elm in greater detail
7. Laying the Foundations of a Weather App in Elm
8. Adding More Features to the Weather App
9. Testing in Elm
10. Implementing User Authentication in Elm

Learn and explore all important features of Vue.js through a number of simple examples.

Key Features

• Uses latest features such as Vue-cli 3, Vuex, and Nuxt
• Practical examples to understand Vue 2 quickly
• Step-by-step approach to reinforce concepts covered

Book Description

Vue.js is the latest trending frontend framework. Simplicity, reactivity, and flexibility are some of the key benefits that Vue offers to developers. This book will help you learn everything you need to know to build stunning reactive web apps with Vue.js 2 quickly and easily.

This book will take you through the Vue 2 framework. You will start by learning the different Vue installation options: CDN, NPM, and Vue CLI. Then we will look at the core concepts of Vue: templates and components – ways to modularize Vue code. You will learn how to utilize directives, which are Vue-specific HTML attributes with additional features. Also, you will see how Vue uses a streamlined approach to development, with reusable methods, computed properties, and watchers, and how it controls state with the help of its data option.

You will learn about the concepts of reactive programming in Vue, and how to understand communication between parent and child components. We will take a look at props and slots, working with CSS, filters, and mixins. We will also look at ways to add transitions and animations to Vue apps. Then you will extend Vue by building custom directives and your own plugins.

Finally, you will learn about Vuex – a Vue plugin that allows us to centralize state, and also introduce Nuxt, which is a framework that builds on top of Vue and solves some issues of single-page applications. After learning about these components, you will be ready to build your own reactive web apps with Vue.js 2.

What you will learn

• Develop apps with Vue.js
• Reuse components using slots
• Use filters, mixins, and global mixins in Vue
• Build custom directives in Vue
• Work with CSS animations
• Work with templates, directives, methods, data, computed properties, and watchers
• Use Nuxt and Vue-Router
• Build and deploy an SSR Vue app

Who this book is for

This book is for people who want to learn and experience developing with Vue.js. Familiarity with HTML, CSS, and JavaScript will help you get the most from this book.

Table of Contents

1. Introducing Vue
2. Basic Concepts of Vue 2
3. Working with Vue-CLI, Components, Props, and Slots
4. Filters and Mixins
5. Making Your Own Directives and Plugins
6. Transitions and Animations
7. Using Vuex
8. Using Nuxt.js and Vue-Router