diff --git a/.babelrc b/.babelrc index 4b1d3f50..1320b9a3 100644 --- a/.babelrc +++ b/.babelrc @@ -1,3 +1,3 @@ { - "presets": ["env", "stage-3"] + "presets": ["@babel/preset-env"] } diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 2c195986..8cff6ada 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -9,7 +9,25 @@ jobs: strategy: matrix: - node-version: [8.x, 10.x, 12.x] + free-solid-svg-icons: [ + 5.x, + 6.x + ] + fontawesome-svg-core: [ + 1.2.x, + 6.x + ] + node-version: [ + 14.x, + 16.x, + 18.x + ] + vue: [ + 2.4.x, + 2.5.x, + 2.6.x, + 2.7.x + ] steps: - uses: actions/checkout@v1 @@ -17,15 +35,26 @@ jobs: uses: actions/setup-node@v1 with: node-version: ${{ matrix.node-version }} - - name: install, build, and test + - name: v5 install, build, and test + if: ${{ matrix.free-solid-svg-icons }} == '5.x' run: | + npm install -g npm npm install + npm install --no-save @fortawesome/fontawesome-svg-core@1.2.x @fortawesome/free-solid-svg-icons@5.x vue@${{ matrix.vue }} npm run build - npm run test.latest - npm run test.next.proregistry + npm list vue + npm run test + - name: v6 install, build, and test + if: ${{ matrix.free-solid-svg-icons }} == '6.x' + run: | + npm install -g npm + npm install + npm install --no-save @fortawesome/fontawesome-svg-core@6.x @fortawesome/free-solid-svg-icons@6.x vue@${{ matrix.vue }} + npm run build + npm list vue + npm run test env: CI: true - FONTAWESOME_NPM_AUTH_TOKEN: ${{ secrets.FONTAWESOME_NPM_AUTH_TOKEN }} - name: dist run: | npm run dist diff --git a/.tool-versions b/.tool-versions index 58e64d08..19ac7bb1 100644 --- a/.tool-versions +++ b/.tool-versions @@ -1,2 +1,2 @@ -nodejs 10.16.2 +nodejs 18.4.0 python 3.7.5 diff --git a/CHANGELOG.md b/CHANGELOG.md index faacaf57..3cdb42dd 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,4 +1,5 @@ # Change Log + All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](http://keepachangelog.com/) and this project adheres to [Semantic Versioning](http://semver.org/). @@ -8,19 +9,80 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p - [Vue 3.x compatible version of this component](https://github.com/FortAwesome/vue-fontawesome/tree/3.x) - [CHANGELOG for version 3.x](https://github.com/FortAwesome/vue-fontawesome/blob/3.x/CHANGELOG.md) +--- +## [2.0.10](https://github.com/FortAwesome/vue-fontawesome/releases/tag/2.0.10) - 2023-01-24 + +### Changed +- NPM download `@fortawesome/vue-fontawesome@latest` is now set to Vue 3; to download the Vue 2 package you will have to use `@fortawesome/vue-fontawesome@latest-2`, which is described in our [Vue setup docs](https://fontawesome.com/docs/web/use-with/vue/#_3-add-the-vue-component) +- Updated CI workflow testing to include Vue 2.7.x +- Updated contributor's GitHub user name in README.md and package.json files + +--- + +## [2.0.9](https://github.com/FortAwesome/vue-fontawesome/releases/tag/2.0.9) - 2022-11-07 + +### Changed +- README.md updated with spelling correction, linter fixes, and new contributor +- App.vue updated icon example to use `fixed-width` rather than `full-width` +- Added some tests for Sharp icons + +--- + +## [2.0.8](https://github.com/FortAwesome/vue-fontawesome/releases/tag/2.0.8) - 2022-06-17 + +### Changed +- README.md Documentation now points to https://fontawesome.com/docs/web/use-with/vue/ + +--- + +## [2.0.7](https://github.com/FortAwesome/vue-fontawesome/releases/tag/2.0.7) - 2022-06-07 + +### Fixed +- Animations for bounce, shake, beat and beat-fade +- Flip animation when used by itself + +--- + +## [2.0.6](https://github.com/FortAwesome/vue-fontawesome/releases/tag/2.0.6) - 2021-10-18 + +### Fixed +- Include 1.3.0-beta versions in peer dependencies + +--- + +## [2.0.5](https://github.com/FortAwesome/vue-fontawesome/releases/tag/2.0.5) - 2021-10-15 + +### Added +- New sizes for `size` prop: 2xs, xl, 2xl +- New animation booleans: `beat`, `fade`, `flash`, `spin-pulse`, & `spin-reverse` + +--- + +## [2.0.4](https://github.com/FortAwesome/vue-fontawesome/releases/tag/2.0.4) - 2021-10-15 + +### Fixed +- Relax the peer dependency for @fortawesome/fontawesome-svg-core + +--- + +## [2.0.3](https://github.com/FortAwesome/vue-fontawesome/releases/tag/2.0.3) - 2021-10-15 + +### Fixed +- Skip parse.icon if the icon is imported directly from an icon package + --- ## [2.0.2](https://github.com/FortAwesome/vue-fontawesome/releases/tag/2.0.2) - 2020-12-17 ### Fixed -* Bumping version to fix a failed release for 2.0.1 +- Bumping version to fix a failed release for 2.0.1 --- ## [2.0.1](https://github.com/FortAwesome/vue-fontawesome/releases/tag/2.0.1) - 2020-12-17 ### Added -* Support for the new parse.icon function from the Font Awesome version 6 @fortawesome/fontawesome-svg-core +- Support for the new parse.icon function from the Font Awesome version 6 @fortawesome/fontawesome-svg-core --- @@ -50,89 +112,89 @@ release. The 0.1 release line will not be getting any further updates. ## [0.1.10](https://github.com/FortAwesome/vue-fontawesome/releases/tag/0.1.10) - 2020-06-15 ### Fixed -* Add TSX support to Typescript definition +- Add TSX support to Typescript definition --- ## [0.1.9](https://github.com/FortAwesome/vue-fontawesome/releases/tag/0.1.9) - 2019-12-13 ### Added -* Counters support for the FontAwesomeLayersText component #174 -* FontAwesomeIcon now supports the "inverse" property #174 +- Counters support for the FontAwesomeLayersText component #174 +- FontAwesomeIcon now supports the "inverse" property #174 --- ## [0.1.8](https://github.com/FortAwesome/vue-fontawesome/releases/tag/0.1.8) - 2019-11-03 ### Fixed -* Removed declare namespace in the TypeScript definition file #177 +- Removed declare namespace in the TypeScript definition file #177 --- ## [0.1.7](https://github.com/FortAwesome/vue-fontawesome/releases/tag/0.1.7) - 2019-08-31 ### Added -* Duotone icon support +- Duotone icon support --- ## [0.1.6](https://github.com/FortAwesome/vue-fontawesome/releases/tag/0.1.6) - 2019-03-18 ### Changed -* Allow the rotation property to be either string or number #171 +- Allow the rotation property to be either string or number #171 --- ## [0.1.5](https://github.com/FortAwesome/vue-fontawesome/releases/tag/0.1.5) - 2019-01-13 ### Added -* Title prop #164 +- Title prop #164 --- ## [0.1.4](https://github.com/FortAwesome/vue-fontawesome/releases/tag/0.1.4) - 2018-12-24 ### Fixed -* Fixing TypeScript definition file #165 +- Fixing TypeScript definition file #165 --- ## [0.1.3](https://github.com/FortAwesome/vue-fontawesome/releases/tag/0.1.3) - 2018-12-04 ### Added -* Adding TypeScript definition file #159 +- Adding TypeScript definition file #159 --- ## [0.1.2](https://github.com/FortAwesome/vue-fontawesome/releases/tag/0.1.2) - 2018-10-29 ### Added -* Adding ES module to package +- Adding ES module to package --- ## [0.1.1](https://github.com/FortAwesome/vue-fontawesome/releases/tag/0.1.1) - 2018-07-16 ### Fixed -* LayersText can use a number as it's value #115 +- LayersText can use a number as it's value #115 --- ## [0.1.0](https://github.com/FortAwesome/vue-fontawesome/releases/tag/0.1.0) - 2018-06-20 ### Changed -* Upgraded to the newer Font Awesome 5.1 packages +- Upgraded to the newer Font Awesome 5.1 packages --- ## [0.0.23](https://github.com/FortAwesome/vue-fontawesome/releases/tag/0.0.23) - 2018-06-04 ### Changed -* Update Vue dependency version to support > 2.4 +- Update Vue dependency version to support > 2.4 --- ## [0.0.22](https://github.com/FortAwesome/vue-fontawesome/releases/tag/0.0.22) - 2017-12-19 ### Changed -* Support for @fortawesome/fontawesome 1.1.0 +- Support for @fortawesome/fontawesome 1.1.0 diff --git a/DEVELOPMENT.md b/DEVELOPMENT.md index 7ac08cab..1cce732e 100644 --- a/DEVELOPMENT.md +++ b/DEVELOPMENT.md @@ -16,8 +16,8 @@ test | Execute unit tests 1. Update `package.json` and change `version` 1. Update `README.md` and `package.json`; adding any contributors 1. Update the `CHANGELOG.md` -1. `npm publish` -1. `npm publish --registry https://npm.fontawesome.com` +1. `npm publish --tag latest-2` +1. `npm publish --tag latest-2 --registry https://npm.fontawesome.com` 1. `git add .` 1. `git commit -a -m 'Release VERSION'` 1. `git push` diff --git a/README.md b/README.md index 757f885a..3543337e 100644 --- a/README.md +++ b/README.md @@ -2,17 +2,15 @@ Official Javascript Component -# vue-fontawesome +# vue-fontawesome (with Vue 2) [![npm](https://img.shields.io/npm/v/@fortawesome/vue-fontawesome.svg?style=flat-square)](https://www.npmjs.com/package/@fortawesome/vue-fontawesome) [![GitHub Actions Status](https://github.com/FortAwesome/vue-fontawesome/workflows/CI/badge.svg)](https://github.com/FortAwesome/vue-fontawesome/actions) -> Font Awesome 5 Vue component using SVG with JS +> Font Awesome Vue component using SVG with JS --- -**Vue 3 is just around the corner!** - **If you have been using 0.1.x of vue-fontawesome, you can safely upgrade to 2.x. We have some upgrading information in the [CHANGELOG](./CHANGELOG.md)** @@ -20,836 +18,51 @@ -- [Introduction](#introduction) - * [Upgrading Font Awesome?](#upgrading-font-awesome) - * [Get started](#get-started) - * [Learn about our new SVG implementation](#learn-about-our-new-svg-implementation) -- [Installation](#installation) -- [Add more styles or Pro icons](#add-more-styles-or-pro-icons) -- [Usage](#usage) - * [Recommended](#recommended) - + [Using Solid icons](#using-solid-icons) - + [Using Brand icons](#using-brand-icons) - + [Using Regular icons](#using-regular-icons) - + [Using Light icons](#using-light-icons) - + [Using Duotone icons](#using-duotone-icons) - + [Quick warning about self-closing tags](#quick-warning-about-self-closing-tags) - + [Processing i tags into svg using Font Awesome](#processing-i-tags-into-svg-using-font-awesome) - * [The icon property](#the-icon-property) - + [Shorthand that assumes a prefix of "fas"](#shorthand-that-assumes-a-prefix-of-fas) - + [Explicit prefix (note the Vue bind shorthand because this uses an array)](#explicit-prefix-note-the-vue-bind-shorthand-because-this-uses-an-array) - + [Explicit icon definition through something like a computed property](#explicit-icon-definition-through-something-like-a-computed-property) - * [Alternative using component property](#alternative-using-component-property) - * [Why use the concept of a library?](#why-use-the-concept-of-a-library) - + [Import the specific icons that you need](#import-the-specific-icons-that-you-need) - + [Import the same icon from different styles](#import-the-same-icon-from-different-styles) - + [Import entire styles](#import-entire-styles) - * [Tree shaking alternative](#tree-shaking-alternative) -- [Features](#features) - * [Register your components first](#register-your-components-first) - * [Basic](#basic) - * [Advanced](#advanced) -- [Integrating with other tools and frameworks](#integrating-with-other-tools-and-frameworks) - * [Nuxt.js](#nuxtjs) - * [PurgeCSS](#purgecss) - * [Web Components with vue-web-component-wrapper](#web-components-with-vue-web-component-wrapper) -- [FAQ](#faq) - * [Why so explicit (the :icon="['far', 'coffee']" syntax)?](#why-so-explicit-the-iconfar-coffee-syntax) - + [How about a separate property for the prefix?](#how-about-a-separate-property-for-the-prefix) - + [Bindings become boilerplate and verbose](#bindings-become-boilerplate-and-verbose) - + [Properties can disagree with each other](#properties-can-disagree-with-each-other) +- [Documentation](#documentation) - [How to Help](#how-to-help) - [Contributors](#contributors) -- [Releasing this project](#releasing-this-project) +- [Releasing this project (only project owners can do this)](#releasing-this-project-only-project-owners-can-do-this) -## Introduction - -Hey there! We're glad you're here... - -### Upgrading Font Awesome? - -If you've used Font Awesome in the past (version 4 or older) there are some -things that you should learn before you dive in. - -> https://fontawesome.com/how-to-use/on-the-web/setup/upgrading-from-version-4 - -### Get started - -This package is for integrating with Vue.js. If you aren't using Vue then it's -not going to help you. Head over to our "Get Started" page for some guidance. - -> https://fontawesome.com/how-to-use/on-the-web/setup/getting-started - -### Learn about our new SVG implementation - -This package, under the hood, uses SVG with JS and the `@fortawesome/fontawesome-svg-core` library. This implementation differs drastically from -the web fonts implementation that was used in version 4 and older of Font Awesome. You might head over there to learn about how it works. - -> https://fontawesome.com/how-to-use/on-the-web/advanced/svg-javascript-core - -## Installation - -Install the core package and icon content. - -``` -$ npm i --save @fortawesome/fontawesome-svg-core -$ npm i --save @fortawesome/free-solid-svg-icons -``` - -Or with Yarn: -``` -$ yarn add @fortawesome/fontawesome-svg-core -$ yarn add @fortawesome/free-solid-svg-icons -``` - -**Using Vue 2.x** - -``` -$ npm i --save @fortawesome/vue-fontawesome@latest -``` - -**Using Vue 3.x** - -``` -$ npm i --save @fortawesome/vue-fontawesome@prerelease -``` - -## Add more styles or Pro icons - -Brands are separated into their own style and for customers upgrading from -version 4 to 5 we have a limited number of Regular icons available. - -**Visit [fontawesome.com/icons](https://fontawesome.com/icons) to search for free and Pro icons** - -``` -$ npm i --save @fortawesome/free-brands-svg-icons -$ npm i --save @fortawesome/free-regular-svg-icons -``` - -If you are a [Font Awesome Pro](https://fontawesome.com/pro) subscriber you can install Pro packages after these [additional configuration](https://fontawesome.com/how-to-use/on-the-web/setup/using-package-managers) are made. - -``` -$ npm i --save @fortawesome/pro-solid-svg-icons -$ npm i --save @fortawesome/pro-regular-svg-icons -$ npm i --save @fortawesome/pro-light-svg-icons -$ npm i --save @fortawesome/pro-duotone-svg-icons -``` - -## Usage - -### Recommended - -The following examples are based on a project configured with [vue-cli](https://github.com/vuejs/vue-cli). - -`src/main.js` - -```javascript -import Vue from 'vue' -import App from './App' -import { library } from '@fortawesome/fontawesome-svg-core' -import { faUserSecret } from '@fortawesome/free-solid-svg-icons' -import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' - -library.add(faUserSecret) - -Vue.component('font-awesome-icon', FontAwesomeIcon) - -Vue.config.productionTip = false - -/* eslint-disable no-new */ -new Vue({ - el: '#app', - components: { App }, - template: '' -}) -``` - -`src/App.vue` - -```vue - - - -``` - -#### Using Solid icons - -```javascript -import { library } from '@fortawesome/fontawesome-svg-core' -import { faUserSecret } from '@fortawesome/free-solid-svg-icons' - -library.add(faUserSecret) -``` - -```html - - - - - - -``` - -#### Using Brand icons - -```javascript -import { library } from '@fortawesome/fontawesome-svg-core' -import { faFontAwesome } from '@fortawesome/free-brands-svg-icons' - -library.add(faFontAwesome) -``` - -```html - - -``` - -#### Using Regular icons - -Using the Pro packages requires [additional configuration](https://fontawesome.com/how-to-use/on-the-web/setup/using-package-managers). - -```javascript -import { library } from '@fortawesome/fontawesome-svg-core' -# Note we are using the Pro style here -import { faUserSecret } from '@fortawesome/pro-regular-svg-icons' - -library.add(faUserSecret) -``` - -```html - -``` - -#### Using Light icons - -```javascript -import { library } from '@fortawesome/fontawesome-svg-core' -# Note we are using the Pro style here -import { faUserSecret } from '@fortawesome/pro-light-svg-icons' - -library.add(faUserSecret) -``` - -```html - -``` - -#### Using Duotone icons - -```javascript -import { library } from '@fortawesome/fontawesome-svg-core' -# Note we are using the Pro style here -import { faUserSecret } from '@fortawesome/pro-duotone-svg-icons' - -library.add(faUserSecret) -``` - -```html - -``` - -You can also [import the same icon from different -styles](#import-the-same-icon-from-different-styles) with some help from ES -`import`. - -#### Quick warning about self-closing tags - -If you are using inline templates or HTML as templates you need to be careful to avoid self-closing tags. - -See [this issue on the Vue.js project](https://github.com/vuejs/vue/issues/1036) - -If you are writing these types of templates make sure and use valid HTML syntax: - -```html - -``` - -#### Processing i tags into svg using Font Awesome - -A basic installation of [Font Awesome](https://fontawesome.com/how-to-use/on-the-web/setup/getting-started?using=svg-with-js) has -the ability to automatically transform `` into -`...` icons. This technology works with the browser's -DOM, [`requestAnimationFrame`][raf], and [`MutationObserver`][mo]. - -When using the `@fortawesome/fontawesome-svg-core` package this **behavior is -disabled by default**. This project uses that package so you will have to -explicitly enable it like this: - -```javascript -import { dom } from '@fortawesome/fontawesome-svg-core' - -dom.watch() // This will kick of the initial replacement of i to svg tags and configure a MutationObserver -``` - -[raf]: https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame -[mo]: https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver - -### The icon property - -The `icon` property of the `FontAwesomeIcon` component can be used in the following way: - -#### Shorthand that assumes a prefix of "fas" - -```javascript - - - - # Same as above - # Same as above -``` - -For the above to work you must add the `spinner` and `align-left` icon to the library. - -```javascript -import { library } from '@fortawesome/fontawesome-svg-core' -import { faSpinner, faAlignLeft } from '@fortawesome/free-solid-svg-icons' - -library.add(faSpinner, faAlignLeft) -``` - -In the event that you are using an icon with a multi-word name please note that -you would need to pass in the icon name using _kebab-case_ as opposed to _camelCase_. - -```javascript - # import { faAddressCard } from '@fortawesome/free-solid-svg-icons' -``` - -#### Explicit prefix (note the Vue bind shorthand because this uses an array) - -```javascript - -``` - -For the above to work you must add the regular `spinner` icon (Pro only) to the library. - -```javascript -import { library } from '@fortawesome/fontawesome-svg-core' -import { faSpinner } from '@fortawesome/pro-regular-svg-icons' - -library.add(faSpinner) -``` - -#### Explicit icon definition through something like a computed property - -```javascript - - - -``` - -### Alternative using component property - -With Vue you can tell your component to resolve other component explicitly. - -```javascript - - - -``` - -### Why use the concept of a library? - -Explicitly selecting icons offer the advantage of only bundling the icons that you -use in your final bundled file. This allows us to subset Font Awesome's -thousands of icons to just the small number that are normally used. - -#### Import the specific icons that you need - -```javascript -import { library } from '@fortawesome/fontawesome-svg-core' -import { faCoffee } from '@fortawesome/free-solid-svg-icons' -import { faSpinner } from '@fortawesome/pro-light-svg-icons' - -library.add(faCoffee, faSpinner) -``` - -#### Import the same icon from different styles - -```javascript -import { library } from '@fortawesome/fontawesome-svg-core' -import { faCoffee as fasCoffee } from '@fortawesome/pro-solid-svg-icons' -import { faCoffee as farCoffee } from '@fortawesome/pro-regular-svg-icons' -import { faCoffee as falCoffee } from '@fortawesome/pro-light-svg-icons' -import { faCoffee as fadCoffee } from '@fortawesome/pro-duotone-svg-icons' - -library.add(fasCoffee, farCoffee, falCoffee, fadCoffee) -``` - -```html - - - - -``` - -#### Import entire styles - -```javascript -import { fab } from '@fortawesome/free-brands-svg-icons' - -library.add(fab) -``` - -This will add the _entire brands style to your library_. Be careful with this -approach as it may be convenient in the beginning but your bundle size will be -large. We **highly** recommend that you take advantage of subsetting through tree shaking. - -### Tree shaking alternative - -Keeping the bundles small when using `import { faCoffee }` relies on -[tree-shaking](https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking). -If you are not using a tool that supports tree shaking **you may end up bundling more -icons than you intend**. Here are some alternative import syntaxes: - -```javascript -import { library } from '@fortawesome/fontawesome-svg-core' -import { faCoffee } from '@fortawesome/free-solid-svg-icons/faCoffee' -import { faSpinner } from '@fortawesome/pro-light-svg-icons/faSpinner' - -library.add(faCoffee, faSpinner) -``` - -How does this work? We have individual icon files like -`node_modules/@fortawesome/free-solid-svg-icons/faCoffee.js` that contain just -that specific icon. - -## Features - -The following features are available as part of Font Awesome. Note that the syntax is different from our general web-use documentation. - -### Register your components first - -To use the following examples you must first register your component so Vue is aware of it. - -A good place to do this is in `main.js` or in the module you are calling `new -Vue()`. **Make sure you register the component** and **have added icons to your -library** before you bootstrap your Vue application. - -```javascript -import Vue from 'vue' -import { FontAwesomeIcon, FontAwesomeLayers, FontAwesomeLayersText } from '@fortawesome/vue-fontawesome' - -Vue.component('font-awesome-icon', FontAwesomeIcon) -Vue.component('font-awesome-layers', FontAwesomeLayers) -Vue.component('font-awesome-layers-text', FontAwesomeLayersText) -``` - -### Basic - -[Size](https://fontawesome.com/how-to-use/on-the-web/styling/sizing-icons): - -```html - - - -``` - -[Fixed width](https://fontawesome.com/how-to-use/on-the-web/styling/fixed-width-icons): - -```html - -``` - -[Rotate](https://fontawesome.com/how-to-use/on-the-web/styling/rotating-icons): - -```html - - - -``` - -Flip horizontally, vertically, or both: - -```html - - - -``` - -Spin and pulse [animation](https://fontawesome.com/how-to-use/on-the-web/styling/animating-icons): - -```html - - -``` - -[Border](https://fontawesome.com/how-to-use/on-the-web/styling/bordered-pulled-icons): - -```html - -``` - -[Pull left or right](https://fontawesome.com/how-to-use/on-the-web/styling/bordered-pulled-icons): - -```html - - -``` - -[Inverse](https://fontawesome.com/how-to-use/on-the-web/styling/stacking-icons): - -```html - -``` - -[Swap opacity](https://fontawesome.com/how-to-use/on-the-web/styling/duotone-icons#swapping-layers): - -```html - -``` - -### Advanced - -[Power Transforms](https://fontawesome.com/how-to-use/on-the-web/styling/power-transforms): - -```html - - -``` - -[Masking](https://fontawesome.com/how-to-use/on-the-web/styling/masking): - -```html - -``` - -[Symbols](https://fontawesome.com/how-to-use/on-the-web/advanced/svg-symbols): - -```html - - -``` - -[Layers](https://fontawesome.com/how-to-use/on-the-web/styling/layering): - -```html - - - - -``` - -[Layers text](https://fontawesome.com/how-to-use/on-the-web/styling/layering): - -```html - - - - -``` - -[Counters](https://fontawesome.com/how-to-use/on-the-web/styling/layering): - -```html - - - - -``` - -## Integrating with other tools and frameworks - -### Nuxt.js - -Install `@fortawesome/vue-fontawesome` and `@fortawesome/fontawesome-svg-core` and any icon packages. - -``` -npm install --save @fortawesome/vue-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons -``` - -Inside your Nuxt.js project add a `plugins/fontawesome.js` file. - -```javascript -import Vue from 'vue' -import { library, config } from '@fortawesome/fontawesome-svg-core' -import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' -import { fas } from '@fortawesome/free-solid-svg-icons' - -// This is important, we are going to let Nuxt.js worry about the CSS -config.autoAddCss = false - -// You can add your icons directly in this plugin. See other examples for how you -// can add other styles or just individual icons. -library.add(fas) - -// Register the component globally -Vue.component('font-awesome-icon', FontAwesomeIcon) -``` - -Modify `nuxt.config.js` adding to the `css` and `plugins` sections. - -```javascript -css: [ - '@fortawesome/fontawesome-svg-core/styles.css' -] -``` - -```javascript -plugins: [ - '~/plugins/fontawesome.js' -] -``` - -### PurgeCSS - -If you use PurgeCSS, or use the nuxt.js tailwindcss module which comes with PurgeCSS prebundled, you need to add fontawesome css classes to the whitelist, as the classes only gets inserted on rendering, and PurgeCSS will treat them as unused and remove them otherwise. - -In your `nuxt.config.js`, add a purgeCSS config object. You may adjust the regex to your liking: - -```javascript -purgeCSS: { - whitelistPatterns: [/svg.*/, /fa.*/] -}, -``` - -### Web Components with vue-web-component-wrapper - -The Vue [project provides a wrapper](https://github.com/vuejs/vue-web-component-wrapper) -that will register your Vue components as [Web Components](https://developer.mozilla.org/en-US/docs/Web/Web_Components). - -This project and all Font Awesome SVG icons will work just fine in these -components but we need to take an additional step to add the CSS correctly. - -To take advantage of encapsulation that the Shadow DOM provides and to keep -other areas of the DOM clean we need to add the Font Awesome CSS to the root of -the Shadow DOM. - -Here is an example that leverages the `mounted()` lifecycle hook to insert the CSS. - -```javascript - -``` - -## FAQ - -### Why so explicit (the :icon="['far', 'coffee']" syntax)? - -It's been brought up a few times that the array syntax used for specifying an -icon from the library is a bit cumbersome. Initially, this does seem to -be the case but we do have good reasons. - -#### How about a separate property for the prefix? - -```html - -``` - -or - -```html - -``` - -The problem with this is that it does not provide a consistent or concise way to specify the mask. - -```html - -``` - -Does the `far` apply to the icon or the mask? What is the prefix for the property it does not apply to? - -Whereas this is consistent and concise: - -```html - -``` - -#### Bindings become boilerplate and verbose - -Since icons are not always static but can change based on Vue component -`methods` or `computed` values we have to take that into consideration. - -Icon properties end up being more verbose: - -```html - -``` - -vs. - -```html - -``` - -Or if you are using a `prefix` property it smells of needless boilerplate: - -```html - - - -``` - -vs. - -```html - - - -``` - -#### Properties can disagree with each other - -If we allow prefix definition through a property and we also allow an icon to -be specified as an object through direct import these two have a chance to -argue with eachother. This could lead to some head-scratching when an icon -doesn't appear in the expected style. +## Documentation -In the following case which style should be used (light from the icon definition or regular from the far boolean): +Official documentation is hosted at fontawesome.com -```html -import { faSpinner } from `@fortawesome/pro-light-svg-icons` +Helpful Vue links: - +- [Add Icons with Vue](https://fontawesome.com/docs/web/use-with/vue/add-icons) +- [Adding Icon Styling with Vue](https://fontawesome.com/docs/web/use-with/vue/style) - -``` +To find the Vue setup, go to our [Web docs](https://fontawesome.com/docs/web) and click the ***"Set Up with Vue"*** (left hand side menu). ## How to Help Review the following docs before diving in: -* [CONTRIBUTING.md](CONTRIBUTING.md) -* [CODE_OF_CONDUCT.md](CODE_OF_CONDUCT.md) +- [CONTRIBUTING.md](CONTRIBUTING.md) +- [CODE_OF_CONDUCT.md](CODE_OF_CONDUCT.md) And then: -1. Check the existing issue and see if you can help! +- Check the existing [issues](https://github.com/FortAwesome/vue-fontawesome/issues) and see if you can help! ## Contributors -The following contributors have either hepled to start this project, have contributed +The following contributors have either helped to start this project, have contributed code, are actively maintaining it (including documentation), or in other ways being awesome contributors to this project. **We'd like to take a moment to recognize them.** | | Name | GitHub | | :--------------------------------------------------------: | -------------- | ---------------------------------------------------- | -| | SirLamer | [@SirLamer](https://github.com/SirLamer) | +| | Greg Peden | [@GregPeden](https://github.com/GregPeden) | | | Liu Xinyu | [@meteorlxy](https://github.com/meteorlxy) | | | Xaver Schulz | [@schulz3000](https://github.com/schulz3000) | | | Yannick Ihmels | [@ihmels](https://github.com/ihmels) | | | btaens | [@btaens](https://github.com/btaens) | | | David Driscoll | [@david-driscoll](https://github.com/david-driscoll) | | | Tyranteon | [@tyranteon](https://github.com/tyranteon) | +| | Aaron Parker | [@parkeyparker](https://github.com/parkeyparker) | If we've missed someone (which is quite likely) submit a Pull Request to us and we'll get it resolved. @@ -863,6 +76,6 @@ The Font Awesome team: | | Brian Talbot | [@talbs](https://github.com/talbs) | | | Jason Lundien | [@jasonlundien](https://github.com/jasonlundien) | -## Releasing this project +## Releasing this project (only project owners can do this) See [DEVELOPMENT.md](DEVELOPMENT.md#release) diff --git a/examples/vue-cli-webpack/package-lock.json b/examples/vue-cli-webpack/package-lock.json index 4f19549e..30af26ef 100644 --- a/examples/vue-cli-webpack/package-lock.json +++ b/examples/vue-cli-webpack/package-lock.json @@ -458,12 +458,12 @@ "dev": true }, "async": { - "version": "2.6.1", - "resolved": "https://registry.npmjs.org/async/-/async-2.6.1.tgz", - "integrity": "sha512-fNEiL2+AZt6AlAw/29Cr0UDe4sRAHCpEHh54WMz+Bb7QfNcFw4h3loofyJpLeQs4Yx7yuqu/2dLgM5hKOs6HlQ==", + "version": "2.6.4", + "resolved": "https://registry.npmjs.org/async/-/async-2.6.4.tgz", + "integrity": "sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==", "dev": true, "requires": { - "lodash": "^4.17.10" + "lodash": "^4.17.14" } }, "async-each": { @@ -1476,35 +1476,6 @@ "integrity": "sha512-ItfYfPLkWHUjckQCk8xC+LwxgK8NYcXywGigJgSwOP8Y2iyWT4f2vsZnoOXTTbo+o5yXmIUJ4gn5538SO5S3gA==", "dev": true }, - "body-parser": { - "version": "1.18.3", - "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.18.3.tgz", - "integrity": "sha1-WykhmP/dVTs6DyDe0FkrlWlVyLQ=", - "dev": true, - "requires": { - "bytes": "3.0.0", - "content-type": "~1.0.4", - "debug": "2.6.9", - "depd": "~1.1.2", - "http-errors": "~1.6.3", - "iconv-lite": "0.4.23", - "on-finished": "~2.3.0", - "qs": "6.5.2", - "raw-body": "2.3.3", - "type-is": "~1.6.16" - }, - "dependencies": { - "iconv-lite": { - "version": "0.4.23", - "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.23.tgz", - "integrity": "sha512-neyTUVFtahjf0mB3dZT77u+8O0QB89jFdnBkd5P1JgYPbPaia3gXXOVL2fq8VyU2gMMD7SaN7QukTB/pmXYvDA==", - "dev": true, - "requires": { - "safer-buffer": ">= 2.1.2 < 3" - } - } - } - }, "bonjour": { "version": "3.5.0", "resolved": "https://registry.npmjs.org/bonjour/-/bonjour-3.5.0.tgz", @@ -1744,6 +1715,16 @@ "unset-value": "^1.0.0" } }, + "call-bind": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz", + "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==", + "dev": true, + "requires": { + "function-bind": "^1.1.1", + "get-intrinsic": "^1.0.2" + } + }, "caller-path": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/caller-path/-/caller-path-0.1.0.tgz", @@ -2194,12 +2175,6 @@ "integrity": "sha1-/ozxhP9mcLa67wGp1IYaXL7EEgo=", "dev": true }, - "content-disposition": { - "version": "0.5.2", - "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.2.tgz", - "integrity": "sha1-DPaLud318r55YcOoUXjLhdunjLQ=", - "dev": true - }, "content-type": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz", @@ -2215,12 +2190,6 @@ "safe-buffer": "~5.1.1" } }, - "cookie": { - "version": "0.3.1", - "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.3.1.tgz", - "integrity": "sha1-5+Ch+e9DtMi6klxcWpboBtFoc7s=", - "dev": true - }, "cookie-signature": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz", @@ -2509,9 +2478,9 @@ } }, "css-what": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/css-what/-/css-what-2.1.2.tgz", - "integrity": "sha512-wan8dMWQ0GUeF7DGEPVjhHemVW/vy6xUYmFzRY8RYqgA0JtXC9rJmbScBjqSu6dg9q0lwPQy6ZAmJVr3PPTvqQ==", + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/css-what/-/css-what-2.1.3.tgz", + "integrity": "sha512-a+EPoD+uZiNfh+5fxw2nO9QwFa6nJe2Or35fGY6Ipw1R3R4AGz1d1TEZrCegvw2YTmZ0jXirGYlzxxpYSHwpEg==", "dev": true }, "cssesc": { @@ -2713,9 +2682,9 @@ "dev": true }, "decode-uri-component": { - "version": "0.2.0", - "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz", - "integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=", + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.2.tgz", + "integrity": "sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ==", "dev": true }, "deep-equal": { @@ -2893,12 +2862,6 @@ "minimalistic-assert": "^1.0.0" } }, - "destroy": { - "version": "1.0.4", - "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz", - "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=", - "dev": true - }, "detect-indent": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/detect-indent/-/detect-indent-4.0.0.tgz", @@ -3610,9 +3573,9 @@ "dev": true }, "eventsource": { - "version": "1.0.7", - "resolved": "https://registry.npmjs.org/eventsource/-/eventsource-1.0.7.tgz", - "integrity": "sha512-4Ln17+vVT0k8aWq+t/bF5arcS3EpT9gYtW66EPacdj/mAFevznsnyoHLPy2BA8gbIQeIHoPsvwmfBftfcG//BQ==", + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/eventsource/-/eventsource-1.1.1.tgz", + "integrity": "sha512-qV5ZC0h7jYIAOhArFJgSfdyz6rALJyb270714o7ZtNnw2WSJ+eexhKtE0O8LYPRsHZHf2osHKZBxGPvm3kPkCA==", "dev": true, "requires": { "original": "^1.0.0" @@ -3679,41 +3642,293 @@ } }, "express": { - "version": "4.16.4", - "resolved": "https://registry.npmjs.org/express/-/express-4.16.4.tgz", - "integrity": "sha512-j12Uuyb4FMrd/qQAm6uCHAkPtO8FDTRJZBDd5D2KOL2eLaz1yUNdUB/NOIyq0iU4q4cFarsUCrnFDPBcnksuOg==", + "version": "4.18.2", + "resolved": "https://registry.npmjs.org/express/-/express-4.18.2.tgz", + "integrity": "sha512-5/PsL6iGPdfQ/lKM1UuielYgv3BUoJfz1aUwU9vHZ+J7gyvwdQXFEBIEIaxeGf0GIcreATNyBExtalisDbuMqQ==", "dev": true, "requires": { - "accepts": "~1.3.5", + "accepts": "~1.3.8", "array-flatten": "1.1.1", - "body-parser": "1.18.3", - "content-disposition": "0.5.2", + "body-parser": "1.20.1", + "content-disposition": "0.5.4", "content-type": "~1.0.4", - "cookie": "0.3.1", + "cookie": "0.5.0", "cookie-signature": "1.0.6", "debug": "2.6.9", - "depd": "~1.1.2", + "depd": "2.0.0", "encodeurl": "~1.0.2", "escape-html": "~1.0.3", "etag": "~1.8.1", - "finalhandler": "1.1.1", + "finalhandler": "1.2.0", "fresh": "0.5.2", + "http-errors": "2.0.0", "merge-descriptors": "1.0.1", "methods": "~1.1.2", - "on-finished": "~2.3.0", - "parseurl": "~1.3.2", + "on-finished": "2.4.1", + "parseurl": "~1.3.3", "path-to-regexp": "0.1.7", - "proxy-addr": "~2.0.4", - "qs": "6.5.2", - "range-parser": "~1.2.0", - "safe-buffer": "5.1.2", - "send": "0.16.2", - "serve-static": "1.13.2", - "setprototypeof": "1.1.0", - "statuses": "~1.4.0", - "type-is": "~1.6.16", + "proxy-addr": "~2.0.7", + "qs": "6.11.0", + "range-parser": "~1.2.1", + "safe-buffer": "5.2.1", + "send": "0.18.0", + "serve-static": "1.15.0", + "setprototypeof": "1.2.0", + "statuses": "2.0.1", + "type-is": "~1.6.18", "utils-merge": "1.0.1", "vary": "~1.1.2" + }, + "dependencies": { + "accepts": { + "version": "1.3.8", + "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz", + "integrity": "sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==", + "dev": true, + "requires": { + "mime-types": "~2.1.34", + "negotiator": "0.6.3" + } + }, + "body-parser": { + "version": "1.20.1", + "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.1.tgz", + "integrity": "sha512-jWi7abTbYwajOytWCQc37VulmWiRae5RyTpaCyDcS5/lMdtwSz5lOpDE67srw/HYe35f1z3fDQw+3txg7gNtWw==", + "dev": true, + "requires": { + "bytes": "3.1.2", + "content-type": "~1.0.4", + "debug": "2.6.9", + "depd": "2.0.0", + "destroy": "1.2.0", + "http-errors": "2.0.0", + "iconv-lite": "0.4.24", + "on-finished": "2.4.1", + "qs": "6.11.0", + "raw-body": "2.5.1", + "type-is": "~1.6.18", + "unpipe": "1.0.0" + } + }, + "bytes": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz", + "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==", + "dev": true + }, + "content-disposition": { + "version": "0.5.4", + "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz", + "integrity": "sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==", + "dev": true, + "requires": { + "safe-buffer": "5.2.1" + } + }, + "cookie": { + "version": "0.5.0", + "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz", + "integrity": "sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==", + "dev": true + }, + "depd": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz", + "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==", + "dev": true + }, + "destroy": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz", + "integrity": "sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==", + "dev": true + }, + "finalhandler": { + "version": "1.2.0", + "resolved": "http://registry.npmjs.org/finalhandler/-/finalhandler-1.2.0.tgz", + "integrity": "sha512-5uXcUVftlQMFnWC9qu/svkWv3GTd2PfUhK/3PLkYNAe7FbqJMt3515HaxE6eRL74GdsriiwujiawdaB1BpEISg==", + "dev": true, + "requires": { + "debug": "2.6.9", + "encodeurl": "~1.0.2", + "escape-html": "~1.0.3", + "on-finished": "2.4.1", + "parseurl": "~1.3.3", + "statuses": "2.0.1", + "unpipe": "~1.0.0" + } + }, + "forwarded": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz", + "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==", + "dev": true + }, + "http-errors": { + "version": "2.0.0", + "resolved": "http://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz", + "integrity": "sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==", + "dev": true, + "requires": { + "depd": "2.0.0", + "inherits": "2.0.4", + "setprototypeof": "1.2.0", + "statuses": "2.0.1", + "toidentifier": "1.0.1" + } + }, + "inherits": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz", + "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==", + "dev": true + }, + "ipaddr.js": { + "version": "1.9.1", + "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz", + "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==", + "dev": true + }, + "mime-db": { + "version": "1.52.0", + "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz", + "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==", + "dev": true + }, + "mime-types": { + "version": "2.1.35", + "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz", + "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==", + "dev": true, + "requires": { + "mime-db": "1.52.0" + } + }, + "ms": { + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", + "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==", + "dev": true + }, + "negotiator": { + "version": "0.6.3", + "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz", + "integrity": "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==", + "dev": true + }, + "on-finished": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz", + "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==", + "dev": true, + "requires": { + "ee-first": "1.1.1" + } + }, + "parseurl": { + "version": "1.3.3", + "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz", + "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==", + "dev": true + }, + "proxy-addr": { + "version": "2.0.7", + "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz", + "integrity": "sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==", + "dev": true, + "requires": { + "forwarded": "0.2.0", + "ipaddr.js": "1.9.1" + } + }, + "qs": { + "version": "6.11.0", + "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz", + "integrity": "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==", + "dev": true, + "requires": { + "side-channel": "^1.0.4" + } + }, + "range-parser": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz", + "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==", + "dev": true + }, + "raw-body": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.1.tgz", + "integrity": "sha512-qqJBtEyVgS0ZmPGdCFPWJ3FreoqvG4MVQln/kCgF7Olq95IbOp0/BWyMwbdtn4VTvkM8Y7khCQ2Xgk/tcrCXig==", + "dev": true, + "requires": { + "bytes": "3.1.2", + "http-errors": "2.0.0", + "iconv-lite": "0.4.24", + "unpipe": "1.0.0" + } + }, + "safe-buffer": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz", + "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==", + "dev": true + }, + "send": { + "version": "0.18.0", + "resolved": "https://registry.npmjs.org/send/-/send-0.18.0.tgz", + "integrity": "sha512-qqWzuOjSFOuqPjFe4NOsMLafToQQwBSOEpS+FwEt3A2V3vKubTquT3vmLTQpFgMXp8AlFWFuP1qKaJZOtPpVXg==", + "dev": true, + "requires": { + "debug": "2.6.9", + "depd": "2.0.0", + "destroy": "1.2.0", + "encodeurl": "~1.0.2", + "escape-html": "~1.0.3", + "etag": "~1.8.1", + "fresh": "0.5.2", + "http-errors": "2.0.0", + "mime": "1.6.0", + "ms": "2.1.3", + "on-finished": "2.4.1", + "range-parser": "~1.2.1", + "statuses": "2.0.1" + } + }, + "serve-static": { + "version": "1.15.0", + "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.15.0.tgz", + "integrity": "sha512-XGuRDNjXUijsUL0vl6nSD7cwURuzEgglbOaFuZM9g3kwDXOWVTck0jLzjPzGD+TazWbboZYu52/9/XPdUgne9g==", + "dev": true, + "requires": { + "encodeurl": "~1.0.2", + "escape-html": "~1.0.3", + "parseurl": "~1.3.3", + "send": "0.18.0" + } + }, + "setprototypeof": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz", + "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==", + "dev": true + }, + "statuses": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz", + "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==", + "dev": true + }, + "type-is": { + "version": "1.6.18", + "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz", + "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==", + "dev": true, + "requires": { + "media-typer": "0.3.0", + "mime-types": "~2.1.24" + } + } } }, "extend": { @@ -3970,21 +4185,6 @@ } } }, - "finalhandler": { - "version": "1.1.1", - "resolved": "http://registry.npmjs.org/finalhandler/-/finalhandler-1.1.1.tgz", - "integrity": "sha512-Y1GUDo39ez4aHAw7MysnUD5JzYX+WaIj8I57kO3aEPT1fFRL4sr7mjei97FgnwhAyyzRYmQZaTHb2+9uZ1dPtg==", - "dev": true, - "requires": { - "debug": "2.6.9", - "encodeurl": "~1.0.2", - "escape-html": "~1.0.3", - "on-finished": "~2.3.0", - "parseurl": "~1.3.2", - "statuses": "~1.4.0", - "unpipe": "~1.0.0" - } - }, "find-cache-dir": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-1.0.0.tgz", @@ -4065,12 +4265,6 @@ "integrity": "sha1-gQaNKVqBQuwKxybG4iAMMPttXoA=", "dev": true }, - "forwarded": { - "version": "0.1.2", - "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz", - "integrity": "sha1-mMI9qxF1ZXuMBXPozszZGw/xjIQ=", - "dev": true - }, "fragment-cache": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/fragment-cache/-/fragment-cache-0.2.1.tgz", @@ -4194,14 +4388,11 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true, "optional": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, - "dev": true, - "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -4222,7 +4413,6 @@ "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true, "optional": true }, "console-control-strings": { @@ -4370,15 +4560,6 @@ "dev": true, "optional": true }, - "minimatch": { - "version": "3.0.4", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "brace-expansion": "^1.1.7" - } - }, "minimist": { "version": "0.0.8", "bundled": true, @@ -4718,6 +4899,17 @@ "integrity": "sha512-3t6rVToeoZfYSGd8YoLFR2DJkiQrIiUrGcjvFX2mDw3bn6k2OtwHN0TNCLbBO+w8qTvimhDkv+LSscbJY1vE6w==", "dev": true }, + "get-intrinsic": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.3.tgz", + "integrity": "sha512-QJVz1Tj7MS099PevUG5jvnt9tSkXN8K14dxQlikJuPt4uD9hHAHjLyLBiLR5zELelBdD9QNRAXZzsJx0WaDL9A==", + "dev": true, + "requires": { + "function-bind": "^1.1.1", + "has": "^1.0.3", + "has-symbols": "^1.0.3" + } + }, "get-stream": { "version": "3.0.0", "resolved": "http://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz", @@ -4845,6 +5037,12 @@ "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=", "dev": true }, + "has-symbols": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz", + "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==", + "dev": true + }, "has-value": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/has-value/-/has-value-1.0.0.tgz", @@ -6066,9 +6264,9 @@ "dev": true }, "minimatch": { - "version": "3.0.4", - "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz", - "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", + "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==", "dev": true, "requires": { "brace-expansion": "^1.1.7" @@ -6403,6 +6601,12 @@ "integrity": "sha512-05KzQ70lSeGSrZJQXE5wNDiTkBJDlUT/myi6RX9dVIvz7a7Qh4oH93BQdiPMn27nldYvVQCKMUaM83AfizZlsQ==", "dev": true }, + "object-inspect": { + "version": "1.12.2", + "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.2.tgz", + "integrity": "sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ==", + "dev": true + }, "object-is": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/object-is/-/object-is-1.0.1.tgz", @@ -6439,15 +6643,6 @@ "integrity": "sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg==", "dev": true }, - "on-finished": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz", - "integrity": "sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=", - "dev": true, - "requires": { - "ee-first": "1.1.1" - } - }, "on-headers": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/on-headers/-/on-headers-1.0.2.tgz", @@ -6706,9 +6901,9 @@ "dev": true }, "path-parse": { - "version": "1.0.6", - "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz", - "integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==", + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz", + "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==", "dev": true }, "path-to-regexp": { @@ -6789,7 +6984,7 @@ "async": { "version": "1.5.2", "resolved": "https://registry.npmjs.org/async/-/async-1.5.2.tgz", - "integrity": "sha1-7GphrlZIDAw8skHJVhjiCJL5Zyo=", + "integrity": "sha512-nSVgobk4rv61R9PUSDtYt7mPVB2olxNR5RWJcAsH676/ef11bUZwvu7+RGYrYauVdDPcO519v68wRhXQtxsV9w==", "dev": true } } @@ -8918,16 +9113,6 @@ "integrity": "sha1-mEcocL8igTL8vdhoEputEsPAKeM=", "dev": true }, - "proxy-addr": { - "version": "2.0.4", - "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.4.tgz", - "integrity": "sha512-5erio2h9jp5CHGwcybmxmVqHmnCBZeewlfJ0pex+UW7Qny7OOZXTtH56TGNyBizkgiOwhJtMKrVzDTeKcySZwA==", - "dev": true, - "requires": { - "forwarded": "~0.1.2", - "ipaddr.js": "1.8.0" - } - }, "prr": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz", @@ -8987,12 +9172,6 @@ "integrity": "sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=", "dev": true }, - "qs": { - "version": "6.5.2", - "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz", - "integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==", - "dev": true - }, "query-string": { "version": "4.3.4", "resolved": "https://registry.npmjs.org/query-string/-/query-string-4.3.4.tgz", @@ -9046,29 +9225,6 @@ "integrity": "sha1-9JvmtIeJTdxA3MlKMi9hEJLgDV4=", "dev": true }, - "raw-body": { - "version": "2.3.3", - "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.3.3.tgz", - "integrity": "sha512-9esiElv1BrZoI3rCDuOuKCBRbuApGGaDPQfjSflGxdy4oyzqghxu6klEkkVIvBje+FF0BX9coEv8KqW6X/7njw==", - "dev": true, - "requires": { - "bytes": "3.0.0", - "http-errors": "1.6.3", - "iconv-lite": "0.4.23", - "unpipe": "1.0.0" - }, - "dependencies": { - "iconv-lite": { - "version": "0.4.23", - "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.23.tgz", - "integrity": "sha512-neyTUVFtahjf0mB3dZT77u+8O0QB89jFdnBkd5P1JgYPbPaia3gXXOVL2fq8VyU2gMMD7SaN7QukTB/pmXYvDA==", - "dev": true, - "requires": { - "safer-buffer": ">= 2.1.2 < 3" - } - } - } - }, "read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", @@ -9529,35 +9685,6 @@ "integrity": "sha512-RS9R6R35NYgQn++fkDWaOmqGoj4Ek9gGs+DPxNUZKuwE183xjJroKvyo1IzVFeXvUrvmALy6FWD5xrdJT25gMg==", "dev": true }, - "send": { - "version": "0.16.2", - "resolved": "https://registry.npmjs.org/send/-/send-0.16.2.tgz", - "integrity": "sha512-E64YFPUssFHEFBvpbbjr44NCLtI1AohxQ8ZSiJjQLskAdKuriYEP6VyGEsRDH8ScozGpkaX1BGvhanqCwkcEZw==", - "dev": true, - "requires": { - "debug": "2.6.9", - "depd": "~1.1.2", - "destroy": "~1.0.4", - "encodeurl": "~1.0.2", - "escape-html": "~1.0.3", - "etag": "~1.8.1", - "fresh": "0.5.2", - "http-errors": "~1.6.2", - "mime": "1.4.1", - "ms": "2.0.0", - "on-finished": "~2.3.0", - "range-parser": "~1.2.0", - "statuses": "~1.4.0" - }, - "dependencies": { - "mime": { - "version": "1.4.1", - "resolved": "https://registry.npmjs.org/mime/-/mime-1.4.1.tgz", - "integrity": "sha512-KI1+qOZu5DcW6wayYHSzR/tXKCDC5Om4s1z2QJjDULzLcmf3DvzS7oluY4HCTrc+9FiKmWUgeNLg7W3uIQvxtQ==", - "dev": true - } - } - }, "serialize-javascript": { "version": "1.5.0", "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-1.5.0.tgz", @@ -9579,18 +9706,6 @@ "parseurl": "~1.3.2" } }, - "serve-static": { - "version": "1.13.2", - "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.13.2.tgz", - "integrity": "sha512-p/tdJrO4U387R9oMjb1oj7qSMaMfmOyd4j9hOFoxZe2baQszgHcSWjuya/CiT5kgZZKRudHNOA0pYXOl8rQ5nw==", - "dev": true, - "requires": { - "encodeurl": "~1.0.2", - "escape-html": "~1.0.3", - "parseurl": "~1.3.2", - "send": "0.16.2" - } - }, "set-blocking": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz", @@ -9674,6 +9789,17 @@ "integrity": "sha512-vFwSUfQvqybiICwZY5+DAWIPLKsWO31Q91JSKl3UYv+K5c2QRPzn0qzec6QPu1Qc9eHYItiP3NdJqNVqetYAww==", "dev": true }, + "side-channel": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz", + "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==", + "dev": true, + "requires": { + "call-bind": "^1.0.0", + "get-intrinsic": "^1.0.2", + "object-inspect": "^1.9.0" + } + }, "signal-exit": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz", @@ -10312,6 +10438,12 @@ "repeat-string": "^1.6.1" } }, + "toidentifier": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz", + "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==", + "dev": true + }, "toposort": { "version": "1.0.7", "resolved": "https://registry.npmjs.org/toposort/-/toposort-1.0.7.tgz", @@ -10345,16 +10477,6 @@ "prelude-ls": "~1.1.2" } }, - "type-is": { - "version": "1.6.16", - "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.16.tgz", - "integrity": "sha512-HRkVv/5qY2G6I8iab9cI7v1bOIdhm94dVjQCPFElW9W+3GeDOSHmy2EBYe4VTApuzolPcmgFTN3ftVJRKR2J9Q==", - "dev": true, - "requires": { - "media-typer": "0.3.0", - "mime-types": "~2.1.18" - } - }, "typedarray": { "version": "0.0.6", "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz", diff --git a/examples/vue-cli-webpack/src/App.vue b/examples/vue-cli-webpack/src/App.vue index 1c13889c..9e30e1ba 100644 --- a/examples/vue-cli-webpack/src/App.vue +++ b/examples/vue-cli-webpack/src/App.vue @@ -27,13 +27,13 @@