+
+ ```
+ ```js
+ new Vue({
+ el: '#emit-example-simple',
+ methods: {
+ sayHi: function () {
+ alert('Hi!')
+ }
+ }
+ })
+ ```
+ {% raw %}
+
+
+
+ {% endraw %}
+
+ Using `$emit` with additional arguments:
+
+ ```js
+ Vue.component('magic-eight-ball', {
+ data: function () {
+ return {
+ possibleAdvice: ['Yes', 'No', 'Maybe']
+ }
+ },
+ methods: {
+ giveAdvice: function () {
+ var randomAdviceIndex = Math.floor(Math.random() * this.possibleAdvice.length)
+ this.$emit('give-advice', this.possibleAdvice[randomAdviceIndex])
+ }
+ },
+ template: `
+
+ `
+ })
+ ```
+
+ ```html
+
+
+ ```
+
+ ```js
+ new Vue({
+ el: '#emit-example-argument',
+ methods: {
+ showAdvice: function (advice) {
+ alert(advice)
+ }
+ }
+ })
+ ```
+
+ {% raw %}
+
+
+
+ {% endraw %}
+
## Instance Methods / Lifecycle
### vm.$mount( [elementOrSelector] )
@@ -1798,7 +2028,7 @@ type: api
### v-for
-- **Expects:** `Array | Object | number | string`
+- **Expects:** `Array | Object | number | string | Iterable (since 2.6)`
- **Usage:**
@@ -1815,7 +2045,7 @@ type: api
``` html
-
+
```
The default behavior of `v-for` will try to patch the elements in-place without moving them. To force it to reorder elements, you need to provide an ordering hint with the `key` special attribute:
@@ -1826,6 +2056,8 @@ type: api
```
+ In 2.6+, `v-for` can also work on values that implement the [Iterable Protocol](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#The_iterable_protocol), including native `Map` and `Set`. However, it should be noted that Vue 2.x currently does not support reactivity on `Map` and `Set` values, so cannot automatically detect changes.
+
When used together with v-if, v-for has a higher priority than v-if. See the list rendering guide for details.
The detailed usage for `v-for` is explained in the guide section linked below. @@ -1859,20 +2091,20 @@ type: api Attaches an event listener to the element. The event type is denoted by the argument. The expression can be a method name, an inline statement, or omitted if there are modifiers present. - Starting in 2.4.0+, `v-on` also supports binding to an object of event/listener pairs without an argument. Note when using the object syntax, it does not support any modifiers. - When used on a normal element, it listens to [**native DOM events**](https://developer.mozilla.org/en-US/docs/Web/Events) only. When used on a custom element component, it listens to **custom events** emitted on that child component. When listening to native DOM events, the method receives the native event as the only argument. If using inline statement, the statement has access to the special `$event` property: `v-on:click="handle('ok', $event)"`. + Starting in 2.4.0+, `v-on` also supports binding to an object of event/listener pairs without an argument. Note when using the object syntax, it does not support any modifiers. + - **Example:** ```html - - + + @@ -1880,6 +2112,9 @@ type: api + + + @@ -1900,6 +2135,9 @@ type: api + + + ``` Listening to custom events on a child component (the handler is called when "my-event" is emitted on the child): @@ -1947,16 +2185,22 @@ type: api
+
@@ -2003,7 +2247,7 @@ type: api
- **Modifiers:**
- [`.lazy`](../guide/forms.html#lazy) - listen to `change` events instead of `input`
- - [`.number`](../guide/forms.html#number) - cast input string to numbers
+ - [`.number`](../guide/forms.html#number) - cast valid input string to numbers
- [`.trim`](../guide/forms.html#trim) - trim input
- **Usage:**
@@ -2014,6 +2258,59 @@ type: api
- [Form Input Bindings](../guide/forms.html)
- [Components - Form Input Components using Custom Events](../guide/components.html#Form-Input-Components-using-Custom-Events)
+### v-slot
+
+- **Shorthand:** `#`
+
+- **Expects:** JavaScript expression that is valid in a function argument position (supports destructuring in [supported environments](../guide/components-slots.html#Slot-Props-Destructuring)). Optional - only needed if expecting props to be passed to the slot.
+
+- **Argument:** slot name (optional, defaults to `default`)
+
+- **Limited to:**
+ - ``
+ - [components](../guide/components-slots.html#Abbreviated-Syntax-for-Lone-Default-Slots) (for a lone default slot with props)
+
+- **Usage:**
+
+ Denote named slots or slots that expect to receive props.
+
+- **Example:**
+
+ ```html
+
+
+
+ Header content
+
+
+ Default slot content
+
+
+ Footer content
+
+
+
+
+
+
+
+
+
+
+ Mouse position: {{ x }}, {{ y }}
+
+ ```
+
+ For more details, see the links below.
+
+- **See also:**
+ - [Components - Slots](../guide/components-slots.html)
+ - [RFC-0001](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0001-new-slot-syntax.md)
+
### v-pre
- **Does not expect expression**
@@ -2084,7 +2381,7 @@ type: api
### key
-- **Expects:** `number | string`
+- **Expects:** `number | string | boolean (since 2.4.2) | symbol (since 2.5.12)`
The `key` special attribute is primarily used as a hint for Vue's virtual DOM algorithm to identify VNodes when diffing the new list of nodes against the old list. Without keys, Vue uses an algorithm that minimizes element movement and tries to patch/reuse elements of the same type in-place as much as possible. With keys, it will reorder elements based on the order change of keys, and elements with keys that are no longer present will always be removed/destroyed.
@@ -2123,8 +2420,8 @@ type: api
` serve as transition effects for **multiple** elements/components. The `` renders a real DOM element. By default it renders a ``, and you can configure what element is should render via the `tag` attribute.
+ `` serve as transition effects for **multiple** elements/components. The `` renders a real DOM element. By default it renders a ``, and you can configure what element it should render via the `tag` attribute.
- Note every child in a `` must be **uniquely keyed** for the animations to work properly.
+ Note that every child in a `` must be **uniquely keyed** for the animations to work properly.
- `` supports moving transitions via CSS transform. When a child's position on screen has changed after an updated, it will get applied a moving CSS class (auto generated from the `name` attribute or configured with the `move-class` attribute). If the CSS `transform` property is "transition-able" when the moving class is applied, the element will be smoothly animated to its destination using the [FLIP technique](https://aerotwist.com/blog/flip-your-animations/).
+ `` supports moving transitions via CSS transform. When a child's position on screen has changed after an update, it will get applied a moving CSS class (auto generated from the `name` attribute or configured with the `move-class` attribute). If the CSS `transform` property is "transition-able" when the moving class is applied, the element will be smoothly animated to its destination using the [FLIP technique](https://aerotwist.com/blog/flip-your-animations/).
```html
@@ -2313,8 +2613,9 @@ Used to denote a `` element as a scoped slot, which is replaced by [`s
### keep-alive
- **Props:**
- - `include` - string or RegExp or Array. Only components matched by this will be cached.
- - `exclude` - string or RegExp or Array. Any component matched by this will not be cached.
+ - `include` - string or RegExp or Array. Only components with matching names will be cached.
+ - `exclude` - string or RegExp or Array. Any component with a matching name will not be cached.
+ - `max` - number. The maximum number of component instances to cache.
- **Usage:**
@@ -2324,7 +2625,7 @@ Used to denote a `` element as a scoped slot, which is replaced by [`s
> In 2.2.0+ and above, `activated` and `deactivated` will fire for all nested components inside a `` tree.
- Primarily used with preserve component state or avoid re-rendering.
+ Primarily used to preserve component state or avoid re-rendering.
```html
@@ -2373,6 +2674,18 @@ Used to denote a `` element as a scoped slot, which is replaced by [`s
The match is first checked on the component's own `name` option, then its local registration name (the key in the parent's `components` option) if the `name` option is not available. Anonymous components cannot be matched against.
+- **`max`**
+
+ > New in 2.5.0+
+
+ The maximum number of component instances to cache. Once this number is reached, the cached component instance that was least recently accessed will be destroyed before creating a new instance.
+
+ ``` html
+
+
+ ```
+
+
+
+```
+This technique can be useful to improve user experience. For example, imagine a user starts entering comments into a text input and then decides to navigate away. If the user then navigated back, their comments would still be preserved.
+
+Once you use keep-alive, then you have access to two more lifecycle hooks: `activated` and `deactivated`. If you do want to clean up or change data when a keep-alive component is removed, you can do so in the `deactivated` hook.
+
+```js
+deactivated: function () {
+ // remove any data you do not want to keep alive
+}
+```
+
+## Wrapping Up
+
+Vue makes it very easy to develop amazing, reactive JavaScript applications, but you still need to be careful about memory leaks. These leaks will often occur when using additional 3rd Party libraries that manipulate the DOM outside of Vue. Make sure to test your application for memory leaks and take appropriate steps to clean up components where necessary.
\ No newline at end of file
diff --git a/src/v2/cookbook/client-side-storage.md b/src/v2/cookbook/client-side-storage.md
new file mode 100644
index 0000000000..915ff798bf
--- /dev/null
+++ b/src/v2/cookbook/client-side-storage.md
@@ -0,0 +1,188 @@
+---
+title: Client-Side Storage
+type: cookbook
+order: 11
+---
+
+## Base Example
+
+Client-side storage is an excellent way to quickly add performance gains to an application. By storing data on the browser itself, you can skip fetching information from the server every time the user needs it. While especially useful when offline, even online users will benefit from using data locally versus a remote server. Client-side storage can be done with [cookies](https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies), [Local Storage](https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API) (technically "Web Storage"), [IndexedDB](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API), and [WebSQL](https://www.w3.org/TR/webdatabase/) (a deprecated method that should not be used in new projects).
+
+In this cookbook entry we'll focus on Local Storage, the simplest of the storage mechanisms. Local Storage uses a key/value system for storing data. It is limited to storing only simple values but complex data can be stored if you are willing to encode and decode the values with JSON. In general, Local Storage is appropriate for smaller sets of data you would want to persist, things like user preferences or form data. Larger data with more complex storage needs would be better stored typically in IndexedDB.
+
+Let's begin with a simple form based example:
+
+``` html
+
{{iconName}} icon
+ {{ iconName }} icon
@@ -83,11 +86,19 @@ Now, if we'd like to make many sizes for the icon, we can do so very easily:
```html
+ {{ slotProps.item.text }}
+
+
+ hello
- -`
+
+
+
+```
+
+```js
+new Vue({
+ el: "#app",
+ data: function () {
+ return {
+ showChoices: true
+ }
+ },
+ mounted: function () {
+ this.initializeChoices()
+ },
+ methods: {
+ initializeChoices: function () {
+ let list = []
+ // lets load up our select with many choices
+ // so it will use a lot of memory
+ for (let i = 0; i < 1000; i++) {
+ list.push({
+ label: "Item " + i,
+ value: i
+ })
+ }
+ new Choices("#choices-single-default", {
+ searchEnabled: true,
+ removeItemButton: true,
+ choices: list
+ })
+ },
+ show: function () {
+ this.showChoices = true
+ this.$nextTick(() => {
+ this.initializeChoices()
+ })
+ },
+ hide: function () {
+ this.showChoices = false
+ }
+ }
+})
+```
+
+To see this memory leak in action, open this [CodePen example](https://codepen.io/freeman-g/pen/qobpxo) using Chrome and then open the Chrome Task Manager. To open the Chrome Task Manager on Mac, choose Chrome Top Navigation > Window > Task Manager or on Windows, use the Shift+Esc shortcut. Now, click the show/hide button 50 or so times. You should see the memory usage in the Chrome Task Manager increase and never be reclaimed.
+
+
+
+## Resolving the Memory Leak
+
+In the above example, we can use our `hide()` method to do some clean up and solve the memory leak prior to removing the select from the DOM. To accomplish this, we will keep a property in our Vue instance’s data object and we will use the [Choices API’s](https://github.com/jshjohnson/Choices) `destroy()` method to perform the clean up.
+
+Check the memory usage again with this [updated CodePen example](https://codepen.io/freeman-g/pen/mxWMor).
+
+```js
+new Vue({
+ el: "#app",
+ data: function () {
+ return {
+ showChoices: true,
+ choicesSelect: null
+ }
+ },
+ mounted: function () {
+ this.initializeChoices()
+ },
+ methods: {
+ initializeChoices: function () {
+ let list = []
+ for (let i = 0; i < 1000; i++) {
+ list.push({
+ label: "Item " + i,
+ value: i
+ })
+ }
+ // Set a reference to our choicesSelect in our Vue instance's data object
+ this.choicesSelect = new Choices("#choices-single-default", {
+ searchEnabled: true,
+ removeItemButton: true,
+ choices: list
+ })
+ },
+ show: function () {
+ this.showChoices = true
+ this.$nextTick(() => {
+ this.initializeChoices()
+ })
+ },
+ hide: function () {
+ // now we can use the reference to Choices to perform clean up here
+ // prior to removing the elements from the DOM
+ this.choicesSelect.destroy()
+ this.showChoices = false
+ }
+ }
+})
+```
+
+## Details about the Value
+
+Memory management and performance testing can easily be neglected in the excitement of shipping quickly, however, keeping a small memory footprint is still important to your overall user experience.
+
+Consider the types of devices your users may be using and what their normal flow will be. Could they use memory constrained laptops or mobile devices? Do your users typically do lots of in-application navigation? If either of these are true, then good memory management practices can help you avoid the worst case scenario of crashing a user’s browser. Even if neither of these are true, you can still potentially have degradation of performance over extended usage of your app if you are not careful.
+
+## Real-World Example
+
+In the above example, we used a `v-if` directive to illustrate the memory leak, but a more common real-world scenario happens when using [vue-router](https://router.vuejs.org/en/) to route to components in a Single Page Application.
+
+Just like the `v-if` directive, `vue-router` removes elements from the virtual DOM and replaces those with new elements when a user navigates around your application. The Vue `beforeDestroy()` [lifecycle hook](/v2/guide/instance.html#Lifecycle-Diagram) is a good place to solve the same sort of issue in a `vue-router` based application.
+
+We could move our clean up into the `beforeDestroy()` hook like this:
+
+```js
+beforeDestroy: function () {
+ this.choicesSelect.destroy()
+}
+```
+
+## Alternative Patterns
+
+We have discussed managing memory when removing elements, but what if you intentionally want to preserve state and keep elements in memory? In this case, you can use the built-in component [keep-alive](/v2/api/#keep-alive).
+
+When you wrap a component with `keep-alive`, its state will be preserved and therefore kept in memory.
+
+```html
+
+
+
+
+
+ My name is
+
+```
+
+This example has one form field bound to a Vue value called `name`. Here's the JavaScript:
+
+``` js
+const app = new Vue({
+ el: '#app',
+ data: {
+ name: ''
+ },
+ mounted() {
+ if (localStorage.name) {
+ this.name = localStorage.name;
+ }
+ },
+ watch: {
+ name(newName) {
+ localStorage.name = newName;
+ }
+ }
+});
+```
+
+Focus on the `mounted` and `watch` parts. We use `mounted` to handle loading the value from localStorage. To handle writing the data base, we watch the `name` value and on change, immediately write it.
+
+You can run this yourself here:
+
+See the Pen testing localstorage by Raymond Camden (@cfjedimaster) on CodePen.
+ + +Type something in the form and then reload this page. You'll note that the value you typed previously will show up automatically. Don't forget that your browser provides excellent developer tools for inspecting client-side storage. Here's an example in Firefox: + + + +And here it is in Chrome: + + + +And then finally, an example in Microsoft Edge. Note that you can find application storage values under the Debugger tab. + + + +As a quick aside, these dev tools also offer you a way to remove storage values. This can be very useful when testing.
+ +Immediately writing the value may not be advisable. Let's consider a slightly more advanced example. First, the updated form. + +``` html +
+
+```
+
+Now we've got two fields (again, bound to a Vue instance) but now there is the addition of a button that runs a `persist` method. Let's look at the JavaScript.
+
+``` js
+const app = new Vue({
+ el: '#app',
+ data: {
+ name: '',
+ age: 0
+ },
+ mounted() {
+ if (localStorage.name) {
+ this.name = localStorage.name;
+ }
+ if (localStorage.age) {
+ this.age = localStorage.age;
+ }
+ },
+ methods: {
+ persist() {
+ localStorage.name = this.name;
+ localStorage.age = this.age;
+ console.log('now pretend I did more stuff...');
+ }
+ }
+})
+```
+
+As before, `mounted` is used to load persisted data, if it exists. This time, though, data is only persisted when the button is clicked. We could also do any validations or transformations here before storing the value. You could also store a date representing when the values were stored. With that metadata, the `mounted` method could make a logical call on whether or not to store the values again. You can try this version below.
+
++ My name is + and I am years old. +
++ +
+See the Pen testing localstorage 2 by Raymond Camden (@cfjedimaster) on CodePen.
+ + +## Working with Complex Values + +As mentioned above, Local Storage only works with simple values. To store more complex values, like objects or arrays, you must serialize and deserialize the values with JSON. Here is a more advanced example that persists an array of cats (the best kind of array possible). + +``` html +
+
+```
+
+This "app" consists of a simple list on top (with a button to remove a cat) and a small form at the bottom to add a new cat. Now let's look at the JavaScript.
+
+``` js
+const app = new Vue({
+ el: '#app',
+ data: {
+ cats: [],
+ newCat: null
+ },
+ mounted() {
+ if (localStorage.getItem('cats')) {
+ try {
+ this.cats = JSON.parse(localStorage.getItem('cats'));
+ } catch(e) {
+ localStorage.removeItem('cats');
+ }
+ }
+ },
+ methods: {
+ addCat() {
+ // ensure they actually typed something
+ if (!this.newCat) {
+ return;
+ }
+
+ this.cats.push(this.newCat);
+ this.newCat = '';
+ this.saveCats();
+ },
+ removeCat(x) {
+ this.cats.splice(x, 1);
+ this.saveCats();
+ },
+ saveCats() {
+ const parsed = JSON.stringify(this.cats);
+ localStorage.setItem('cats', parsed);
+ }
+ }
+})
+```
+
+In this application, we've switched to use the Local Storage APIs versus "direct" access. Both work but the API method is generally preferred. `mounted` now has to grab the value and parse the JSON value. If anything goes wrong here we assume the data is corrupt and delete it. (Remember, any time your web application uses client-side storage, the user has access to it and can modify it at will.)
+
+We have three methods now to handle working with cats. Both `addCat` and `removeCat` handle updating the "live" Vue data stored in `this.cats`. They then run `saveCats` which handles serializing and persisting the data. You can play with this version below:
+
+Cats
+
+
+
+ + {{ cat }} + +
++ + +
+See the Pen localstorage, complex by Raymond Camden (@cfjedimaster) on CodePen.
+ + +## Alternative Patterns + +While the Local Storage API is relatively simple, it is missing some basic features that would be useful in many applications. The following plugins wrap Local Storage access and make it easier to use, while also adding functionality like default values. + +* [vue-local-storage](https://github.com/pinguinjkeke/vue-local-storage) +* [vue-reactive-storage](https://github.com/ropbla9/vue-reactive-storage) +* [vue2-storage](https://github.com/yarkovaleksei/vue2-storage) + +## Wrapping Up + +While the browser will never replace a server persistence system, having multiple ways to cache data locally can be a huge performance boost for your application, and working with it in Vue.js makes it even more powerful. diff --git a/src/v2/cookbook/creating-custom-scroll-directives.md b/src/v2/cookbook/creating-custom-scroll-directives.md index 927179a314..645ba3eb5c 100644 --- a/src/v2/cookbook/creating-custom-scroll-directives.md +++ b/src/v2/cookbook/creating-custom-scroll-directives.md @@ -6,7 +6,7 @@ order: 7 ## Base Example -There are many times that we might want to add a bit of behavior, especially animation, to a scroll event on a site. There are many ways to do so, but the path with the least amount of code and dependencies is perhaps to use a [custom directive](https://vuejs.org/v2/guide/custom-directive.html) to create a hook for anything that fires off a particular scroll event. +There are many times that we might want to add a bit of behavior, especially animation, to a scroll event on a site. There are many ways to do so, but the path with the least amount of code and dependencies is perhaps to use a [custom directive](/v2/guide/custom-directive.html) to create a hook for anything that fires off a particular scroll event. ```js Vue.directive('scroll', { @@ -40,7 +40,10 @@ new Vue({ ```htmlScroll me
-
+
@@ -50,7 +53,7 @@ new Vue({
We'd also need a style property that will transition the intermediary values here, in this case:
-```
+```css
.box {
transition: 1.5s all cubic-bezier(0.39, 0.575, 0.565, 1);
}
diff --git a/src/v2/cookbook/debugging-in-vscode.md b/src/v2/cookbook/debugging-in-vscode.md
index fd2f0eb5af..5c79d7b6dd 100644
--- a/src/v2/cookbook/debugging-in-vscode.md
+++ b/src/v2/cookbook/debugging-in-vscode.md
@@ -1,32 +1,49 @@
---
-title: Debugging in VS Code and Chrome
+title: Debugging in VS Code
type: cookbook
order: 8
---
-Every application reaches a point where it's necessary to understand failures, small to large. In this recipe, we explore a few workflows for VS Code users, who are using Chrome to test.
+Every application reaches a point where it's necessary to understand failures, small to large. In this recipe, we explore a few workflows for VS Code users who would like to debug their application in the browser.
-This recipe shows how to use the [Debugger for Chrome](https://github.com/Microsoft/VSCode-chrome-debug) extension with VS Code to debug Vue.js applications generated by the [Vue CLI](https://github.com/vuejs/vue-cli).
+This recipe shows how to debug [Vue CLI](https://github.com/vuejs/vue-cli) applications in VS Code as they run in the browser.
+
+Lorem ipsum dolor sit amet, consectetur adipisicing elit. A atque amet harum aut ab veritatis earum porro praesentium ut corporis. Quasi provident dolorem officia iure fugiat, eius mollitia sequi quisquam.
Note: This recipe covers Chrome and Firefox. If you know how to setup VS Code debugging with other browsers, please consider sharing your insights (see bottom of the page).
## Prerequisites -You must have Chrome and VS Code installed. Make sure to get the latest version of [Debugger for Chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome) extension installed in VS Code. +Make sure you have VS Code and the browser of your choice installed, and the latest version of the corresponding Debugger extension installed and enabled: + +* [Debugger for Chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome) +* [Debugger for Firefox](https://marketplace.visualstudio.com/items?itemName=hbenl.vscode-firefox-debug) -Install and create a project with the [vue-cli](https://github.com/vuejs/vue-cli), with the instructions for installation documented in the readme of the project. Change into the newly created application directory and open VS Code. +Install and create a project with the [vue-cli](https://github.com/vuejs/vue-cli), following the instructions in the [Vue CLI Guide](https://cli.vuejs.org/). Change into the newly created application directory and open VS Code. -### Showing Source Code in the Chrome Devtools +### Displaying Source Code in the Browser -Before you can debug your Vue components from VS Code you need to update the generated Webpack config to build sourcemaps. We do this so that our debugger has a way to map the code within a compressed file back to its position in the original file. This ensures that you can debug an application even after your assets have been optimized by Webpack. +Before you can debug your Vue components from VS Code, you need to update the generated Webpack config to build sourcemaps. We do this so that our debugger has a way to map the code within a compressed file back to its position in the original file. This ensures that you can debug an application even after your assets have been optimized by Webpack. -Go to `config/index.js` and find the `devtool` property. Update it to: +If you use Vue CLI 2, set or update the `devtool` property inside `config/index.js`: ```json devtool: 'source-map', ``` +If you use Vue CLI 3, set or update the `devtool` property inside `vue.config.js`: + +```js +module.exports = { + configureWebpack: { + devtool: 'source-map' + } +} +``` + ### Launching the Application from VS Code -Click on the Debugging icon in the Activity Bar to bring up the Debug view, then click on the gear icon to configure a launch.json file, selecting **Chrome** for the environment. Replace content of the generated launch.json with the following two configurations: +We're assuming the port to be `8080` here. If it's not the case (for instance, if `8080` has been taken and Vue CLI automatically picks another port for you), just modify the configuration accordingly.
+ +Click on the Debugging icon in the Activity Bar to bring up the Debug view, then click on the gear icon to configure a launch.json file, selecting **Chrome/Firefox: Launch** as the environment. Replace content of the generated launch.json with the corresponding configuration:  @@ -44,6 +61,14 @@ Click on the Debugging icon in the Activity Bar to bring up the Debug view, then "sourceMapPathOverrides": { "webpack:///src/*": "${webRoot}/*" } + }, + { + "type": "firefox", + "request": "launch", + "name": "vuejs: firefox", + "url": "http://localhost:8080/", + "webRoot": "${workspaceFolder}/src", + "pathMappings": [{ "url": "webpack:///src/", "path": "${webRoot}/" }] } ] } @@ -53,40 +78,30 @@ Click on the Debugging icon in the Activity Bar to bring up the Debug view, then 1. Set a breakpoint in **src/components/HelloWorld.vue** on `line 90` where the `data` function returns a string. - +  2. Open your favorite terminal at the root folder and serve the app using Vue CLI: -``` -npm start -``` + ``` + npm run serve + ``` -3. Go to the Debug view, select the **'vuejs: chrome'** configuration, then press F5 or click the green play button. +3. Go to the Debug view, select the **'vuejs: chrome/firefox'** configuration, then press F5 or click the green play button. -4. Your breakpoint should now be hit as the new instance of Chrome opens `http://localhost:8080`. +4. Your breakpoint should now be hit as a new browser instance opens `http://localhost:8080`. - +  ## Alternative Patterns ### Vue Devtools -There are other methods of debugging, varying in complexity. The most popular and simple of which is to use the excellent [vue-devtools](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd). Some of the benefits of working with the devtools are that they enable you to live-edit data properties and see the changes reflected immediately. The other major benefit is the ability to do time travel debugging for Vuex. +There are other methods of debugging, varying in complexity. The most popular and simple of which is to use the excellent Vue.js devtools [for Chrome](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd) and [for Firefox](https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/). Some of the benefits of working with the devtools are that they enable you to live-edit data properties and see the changes reflected immediately. The other major benefit is the ability to do time travel debugging for Vuex. Please note that if the page uses a production/minified build of Vue.js (such as the standard link from a CDN), devtools inspection is disabled by default so the Vue pane won't show up. If you switch to an unminified version, you may have to give the page a hard refresh to see them.
-### Vuetron - -[Vuetron](http://vuetron.io/) is a really nice project that extends some of the work that vue-devtools has done. In addition to the normal devtools workflow, you are able to: - -* Quickly view API Request/Response: if you're using the fetch API for requests, this event is displayed for any request sent. The expanded card displays the request data as well as the response data. -* Subscribe to specific parts of your application’s state for faster debugging -* Visualize component hierarchy, and an animation allows you to collapse or expand the tree for specific hierarchy views. - - - ### Simple Debugger Statement The example above has a great workflow. However, there is an alternative option where you can use the [native debugger statement](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/debugger) directly in your code. If you choose to work this way, it's important that you remember to remove the statements when you're done. diff --git a/src/v2/cookbook/dockerize-vuejs-app.md b/src/v2/cookbook/dockerize-vuejs-app.md new file mode 100644 index 0000000000..1fc4ed6299 --- /dev/null +++ b/src/v2/cookbook/dockerize-vuejs-app.md @@ -0,0 +1,134 @@ +--- +title: Dockerize Vue.js App +type: cookbook +order: 13 +--- + +## Simple Example + +So you built your first Vue.js app using the amazing [Vue.js webpack template](https://github.com/vuejs-templates/webpack) and now you really want to show off with your colleagues by demonstrating that you can also run it in a Docker container. + +Let's start by creating a `Dockerfile` in the root folder of our project: + +```docker +FROM node:lts-alpine + +# install simple http server for serving static content +RUN npm install -g http-server + +# make the 'app' folder the current working directory +WORKDIR /app + +# copy both 'package.json' and 'package-lock.json' (if available) +COPY package*.json ./ + +# install project dependencies +RUN npm install + +# copy project files and folders to the current working directory (i.e. 'app' folder) +COPY . . + +# build app for production with minification +RUN npm run build + +EXPOSE 8080 +CMD [ "http-server", "dist" ] +``` + +It may seem redundant to first copy `package.json` and `package-lock.json` and then all project files and folders in two separate steps but there is actually [a very good reason for that](http://bitjudo.com/blog/2014/03/13/building-efficient-dockerfiles-node-dot-js/) (spoiler: it allows us to take advantage of cached Docker layers). + +Now let's build the Docker image of our Vue.js app: + +```bash +docker build -t vuejs-cookbook/dockerize-vuejs-app . +``` + +Finally, let's run our Vue.js app in a Docker container: + +```bash +docker run -it -p 8080:8080 --rm --name dockerize-vuejs-app-1 vuejs-cookbook/dockerize-vuejs-app +``` + +We should be able to access our Vue.js app on `localhost:8080`. + +## Real-World Example + +In the previous example, we used a simple, zero-configuration command-line [http server](https://github.com/indexzero/http-server) to serve our Vue.js app which is perfectly ok for quick prototyping and _may_ even be ok for simple production scenarios. After all, the documentation says: + +> It is powerful enough for production usage, but it's simple and hackable enough to be used for testing, local development, and learning. + +Nevertheless, for realistically complex production use cases, it may be wiser to stand on the shoulders of some giant like [NGINX](https://www.nginx.com/) or [Apache](https://httpd.apache.org/) and that is exactly what we are going to do next: we are about to leverage NGINX to serve our Vue.js app because it is considered to be one of the most performant and battle-tested solutions out there. + +Let's refactor our `Dockerfile` to use NGINX: + + ```docker +# build stage +FROM node:lts-alpine as build-stage +WORKDIR /app +COPY package*.json ./ +RUN npm install +COPY . . +RUN npm run build + +# production stage +FROM nginx:stable-alpine as production-stage +COPY --from=build-stage /app/dist /usr/share/nginx/html +EXPOSE 80 +CMD ["nginx", "-g", "daemon off;"] +``` + +Ok, let's see what's going on here: +* we have split our original `Dockerfile` in multiple stages by leveraging the Docker [multi-stage builds](https://docs.docker.com/develop/develop-images/multistage-build/) feature; +* the first stage is responsible for building a production-ready artifact of our Vue.js app; +* the second stage is responsible for serving such artifact using NGINX. + +Now let's build the Docker image of our Vue.js app: + +```bash +docker build -t vuejs-cookbook/dockerize-vuejs-app . +``` + +Finally, let's run our Vue.js app in a Docker container: + +```bash +docker run -it -p 8080:80 --rm --name dockerize-vuejs-app-1 vuejs-cookbook/dockerize-vuejs-app +``` + +We should be able to access our Vue.js app on `localhost:8080`. + +## Additional Context + +If you are reading this cookbook, chances are you already know why you decided to dockerize your Vue.js app. But if you simply landed on this page after hitting the Google's `I'm feeling lucky` button, let me share with you a couple of good reasons for doing that. + +Today's modern trend is to build applications using the [Cloud-Native](https://pivotal.io/cloud-native) approach which revolves mainly around the following buzzwords: +* Microservices +* DevOps +* Continuous Delivery + +Let's see how these concepts actually affect our decision of dockerizing our Vue.js app. + +### Effects of Microservices + +By adopting the [microservices architectural style](https://martinfowler.com/microservices/), we end up building a single application as a suite of small services, each running in its own process and communicating with lightweight mechanisms. These services are built around business capabilities and independently deployable by fully automated deployment machinery. + +So, committing to this architectural approach most of the time implies developing and delivering our front-end as an independent service. + +### Effects of DevOps + +The adoption of [DevOps](https://martinfowler.com/bliki/DevOpsCulture.html) culture, tools and agile engineering practices has, among other things, the nice effect of increasing the collaboration between the roles of development and operations. One of the main problem of the past (but also today in some realities) is that the dev team tended to be uninterested in the operation and maintenance of a system once it was handed over to the ops team, while the latter tended to be not really aware of the system's business goals and, therefore, reluctant in satisfying the operational needs of the system (also referred to as "whims of developers"). + +So, delivering our Vue.js app as a Docker image helps reducing, if not removing entirely, the difference between running the service on a developer's laptop, the production environment or any environment we may think of. + +### Effects of Continuous Delivery + +By leveraging the [Continuous Delivery](https://martinfowler.com/bliki/ContinuousDelivery.html) discipline we build our software in a way that it can potentially be released to production at any time. Such engineering practice is enabled by means of what is normally called [continuous delivery pipeline](https://martinfowler.com/bliki/DeploymentPipeline.html). The purpose of a continuous delivery pipeline is to split our build into stages (e.g. compilation, unit tests, integration tests, performance tests, etc.) and let each stage verify our build artifact whenever our software changes. Ultimately, each stage increases our confidence in the production readiness of our build artifact and, therefore, reduces the risk of breaking things in production (or any other environment for that matter). + +So, creating a Docker image for our Vue.js app is a good choice here because that would represent our final build artifact, the same artifact that would be verified against our continuous delivery pipeline and that could potentially be released to production with confidence. + +## Alternative Patterns + +If your company is not into Docker and Kubernetes just yet or you simply want to get your MVP out the door, maybe dockerizing your Vue.js app is not what you need. + +Common alternatives are: +* leveraging an all-in-one platform like [Netlify](https://www.netlify.com/); +* hosting your SPA on [Amazon S3](https://aws.amazon.com/s3/) and serving it with [Amazon CloudFront](https://aws.amazon.com/cloudfront/) (see [this](https://serverless-stack.com/chapters/deploy-the-frontend.html) link for a detailed guide). diff --git a/src/v2/cookbook/editable-svg-icons.md b/src/v2/cookbook/editable-svg-icons.md index 033a7230ce..a1903f5533 100644 --- a/src/v2/cookbook/editable-svg-icons.md +++ b/src/v2/cookbook/editable-svg-icons.md @@ -35,7 +35,10 @@ We'll create a base icon (`IconBase.vue`) component that uses a slot. :aria-labelledby="iconName" role="presentation" > -
-