Skip to content

Commit

Permalink
feat(docs): update vue links (since v3 is now default/latest version)
Browse files Browse the repository at this point in the history
  • Loading branch information
rstoenescu committed Feb 10, 2022
1 parent 656a42d commit 453dfda
Show file tree
Hide file tree
Showing 10 changed files with 19 additions and 20 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ import MyDirective from '../directive/MyDirective.js'
// We globally register our directive with Vue;
// Remember that all directives in Vue will start with 'v-'
// but that should not be part of your directive name
// https://v3.vuejs.org/guide/custom-directive.html#custom-directives
// https://vuejs.org/guide/custom-directive.html#custom-directives
// 'my-directive' will be used as 'v-my-directive'
export default ({ app }) => {
app.directive('my-directive', MyDirective)
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/contribution-guide/contribution-guide.md
Original file line number Diff line number Diff line change
Expand Up @@ -126,7 +126,7 @@ Over time we consolidated a set of rules which we follow and following them will
- Capitalize titles, see [How to Use Capitalize My Title](https://capitalizemytitle.com/).
- Use the present tense.
- Be concise, avoid text / code duplication.
- Link to the external sources which are used as master information sources and are usually updated more frequently, like [Mozilla MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript), [Vue.js API](https://v3.vuejs.org/api/) rather than compiled tutorials which tend to be outdated soon.
- Link to the external sources which are used as master information sources and are usually updated more frequently, like [Mozilla MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript), [Vue.js API](https://vuejs.org/api/) rather than compiled tutorials which tend to be outdated soon.
- Do the proofreading before opening a PR
- Do not repeat texts from other sources, but keep only things which are relevant and shows in a context Quasar specific features
- Use official names. For example use `Firebase` instead of `firebase`
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/introduction-to-quasar.md
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,7 @@ Quasar comes equipped with over 40 language packs out of the box. On top of that
And finally, it’s worth mentioning the significant amount of time taken to write great, bloat-free, focused and complete documentation so that developers can quickly pick up Quasar. We put special effort into our documentation to make sure there is no confusion.

## Underlying technologies
[Vue](https://v3.vuejs.org/), [Node.js](https://nodejs.org/), [Webpack](https://webpack.js.org/), [Cordova](https://cordova.apache.org/), [Capacitor](https://capacitor.ionicframework.com), [Electron](https://electronjs.org/).
[Vue](https://vuejs.org/), [Node.js](https://nodejs.org/), [Webpack](https://webpack.js.org/), [Cordova](https://cordova.apache.org/), [Capacitor](https://capacitor.ionicframework.com), [Electron](https://electronjs.org/).

Except for Vue, which only takes half a day to pick up and will change your life forever, there is no requirement for you to know the other technologies. They are all integrated and configured in Quasar for you.

Expand Down
5 changes: 2 additions & 3 deletions docs/src/pages/options/animations.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,11 @@ title: Animations
desc: Helper CSS animations supplied by Animate.css for a Quasar app.
---

CSS Transitions can be handled by the [Vue Transition Component](https://v3.vuejs.org/guide/transitions-overview.html). The transitions are used for entering (appearing) or leaving (disappearing) animations.
CSS Transitions can be handled by the [Vue Transition Component](https://vuejs.org/guide/transitions-overview.html). The transitions are used for entering (appearing) or leaving (disappearing) animations.

However, Quasar can supply a big list of ready to use CSS animations. The animation effects are borrowed from [Animate.css](https://animate.style/). So there are 80+ animation types available for you to use out of the box. Check the list either on Animate.css website or on the demo available for this page.

> Please refer to [Vue](https://v3.vuejs.org/api/built-in-components.html#transition) documentation for learning on how to use the Vue supplied `<transition>` component.
> Please refer to [Vue](https://vuejs.org/api/built-in-components.html#transition) documentation for learning on how to use the Vue supplied `<transition>` component.
## Installation
Edit `/quasar.conf.js`.
Expand Down Expand Up @@ -88,4 +88,3 @@ Please note some things in the above example:
1. Note `<transition-group>` instead of `<transition>`.
2. The components and DOM elements must be keyed, like `key="text"` or `key="email-button"` in the example above.
3. Both examples above have the Boolean property `appear` specified, which makes the entering animation kick in right after component(s) have been rendered. This property is optional.

2 changes: 1 addition & 1 deletion docs/src/pages/quasar-cli/lazy-loading.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ We'll cover how you can lazy load / code split parts of your app so that they ar
It's normal to use the Vue Router calling static components as below.

::: warning
Quasar documentation assumes you are already familiar with [Vue Router](https://github.com/vuejs/vue-router-next). Below it's described only the basics of how to make use of it in a Quasar CLI project. For the full list of its features please visit the [Vue Router documentation](https://next.router.vuejs.org/).
Quasar documentation assumes you are already familiar with [Vue Router](https://github.com/vuejs/vue-router). Below it's described only the basics of how to make use of it in a Quasar CLI project. For the full list of its features please visit the [Vue Router documentation](https://router.vuejs.org/).
:::

```js
Expand Down
4 changes: 2 additions & 2 deletions docs/src/pages/quasar-cli/linter.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ Further extension of one of the Eslint setups above can be made. Your project wi

```js
extends: [
// https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
// https://eslint.vuejs.org/rules/#priority-a-essential-error-prevention-for-vue-js-3-x
// consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
'plugin:vue/strongly-recommended'
]
Expand All @@ -43,7 +43,7 @@ The linting rules can be removed, changed, or added. Notice some things:
* Some rules are for the Standard, Airbnb or Prettier standards (whichever you chose when project was created). Example: 'brace-style'.
* Some rules are for eslint-plugin-vue. Example: 'vue/max-attributes-per-line'.

You can add/remove/change rules by first visiting https://eslint.org/docs/rules/ or https://github.com/vuejs/eslint-plugin-vue.
You can add/remove/change rules by first visiting [https://eslint.org/docs/rules/](https://eslint.org/docs/rules/) or [https://eslint.vuejs.org/rules](https://eslint.vuejs.org/rules).

Example of ESLint rules below:
```js
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/quasar-cli/routing.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ You'll notice that your Quasar project contains a `/src/router` folder. This hol
* "/src/router/routes.js" holds the routes of your website/app

::: warning
Quasar documentation assumes you are already familiar with [Vue Router](https://github.com/vuejs/vue-router-next). Below it's described only the basics of how to make use of it in a Quasar CLI project. For the full list of its features please visit the [Vue Router documentation](https://next.router.vuejs.org/).
Quasar documentation assumes you are already familiar with [Vue Router](https://github.com/vuejs/vue-router). Below it's described only the basics of how to make use of it in a Quasar CLI project. For the full list of its features please visit the [Vue Router documentation](https://router.vuejs.org/).
:::

The `/src/router/routes.js` needs to import your website/app's Pages and Layouts. Read more on [Routing with Layouts and Pages](/layout/routing-with-layouts-and-pages) documentation page.
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/security/dos-and-donts.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ We have collected some best practices for those of you new to the security theat

### User Input and the Dangers of v-html

The `v-html` directive is a wonderful way to programmatically render markup, but even the Vue docs come with [this warning](https://v3.vuejs.org/api/directives.html#v-html):
The `v-html` directive is a wonderful way to programmatically render markup, but even the Vue docs come with [this warning](https://vuejs.org/api/directives.html#v-html):
> "Dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to XSS vulnerabilities. Only use HTML interpolation on trusted content and never on user-provided content."
If you don't know what that means, take a quick look at what OWASP has to say about [XSS (aka cross-site scripting)](https://owasp.org/www-community/attacks/xss/).
Expand Down
4 changes: 2 additions & 2 deletions docs/src/pages/start/how-to-use-vue.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
title: How To Use Vue
desc: Quick tutorial about Vue principles and how to use it with Quasar.
---
Before you begin with Quasar, it is a good idea to get acquainted with ES6 and have a fairly good knowledge about how Vue 3 works. ([Quick overview of ES6](https://github.com/lukehoban/es6features) and [ES6 complete list of features](http://es6-features.org/#Constants) -- don't worry, you don't need to understand ALL of ES6). For devs experienced with reactive UIs, the [Vue 3 documentation](https://v3.vuejs.org/) itself takes a half-day at most to read top-to-bottom and will help you understand how Quasar components can be used and configured.
Before you begin with Quasar, it is a good idea to get acquainted with ES6 and have a fairly good knowledge about how Vue 3 works. ([Quick overview of ES6](https://github.com/lukehoban/es6features) and [ES6 complete list of features](http://es6-features.org/#Constants) -- don't worry, you don't need to understand ALL of ES6). For devs experienced with reactive UIs, the [Vue 3 documentation](https://vuejs.org/) itself takes a half-day at most to read top-to-bottom and will help you understand how Quasar components can be used and configured.

::: tip
If you are a total beginner to Vue and reactive UI libraries and want a good tutorial, we recommend you take a look at [Vue and Quasar video tutorials](/video-tutorials).
Expand Down Expand Up @@ -57,7 +57,7 @@ You can specify you want your chosen preprocessor to handle the CSS code that yo

## Using Quasar Directives

Quasar comes with a few custom [Vue Directives](https://v3.vuejs.org/guide/custom-directive.html). These directives can be applied on almost any DOM element or Component.
Quasar comes with a few custom [Vue Directives](https://vuejs.org/guide/custom-directive.html). These directives can be applied on almost any DOM element or Component.

Example of a Quasar directive:

Expand Down
14 changes: 7 additions & 7 deletions docs/src/pages/start/upgrade-guide.md
Original file line number Diff line number Diff line change
Expand Up @@ -286,13 +286,13 @@ You'll need to edit src/App.vue and remove the wrapper `<div id="q-app">`. You d
For Quasar CLI projects, you don't need to manually install/upgrade the `vue` package as "@quasar/app" v3 is already supplying the correct version of Vue for you.
:::

Since you will also switch to [Vue 3](https://v3.vuejs.org), it's best that you also take a look at its [migration guide](https://v3.vuejs.org/guide/migration/introduction.html) **after** finishing reading this migration guide.
Since you will also switch to [Vue 3](https://vuejs.org), it's best that you also take a look at its [migration guide](https://vuejs.org/guide/migration/introduction.html) **after** finishing reading this migration guide.

If you're using .vue files, you'll most likely have a fairly easy transition because 1) vue-loader (supplied by `@quasar/app`) is the one parsing the [SFC syntax](https://v3.vuejs.org/guide/single-file-component.html) and instructing Vue 3 on what to do and 2) you can still use the Options API (although we recommend that you convert to the newer and better [Composition API](https://v3.vuejs.org/guide/composition-api-introduction.html)).
If you're using .vue files, you'll most likely have a fairly easy transition because 1) vue-loader (supplied by `@quasar/app`) is the one parsing the [SFC syntax](https://vuejs.org/guide/single-file-component.html) and instructing Vue 3 on what to do and 2) you can still use the Options API (although we recommend that you convert to the newer and better [Composition API](https://vuejs.org/guide/composition-api-introduction.html)).

We suggest that you first convert your project to Quasar v2 while maintaining Options API (because your components are already in Options API form and you probably want to ensure everything is working first). After this transition, you can convert all your Vue components to Composition API, but in no way is this a requirement.

Along with Vue3, there is a new major version of [Vue Router v4](https://next.router.vuejs.org), which has its own [breaking changes](https://next.router.vuejs.org/guide/migration/) you should be aware of. There's also the new [Vuex v4](https://vuex.vuejs.org/) too.
Along with Vue3, there is a new major version of [Vue Router v4](https://router.vuejs.org), which has its own [breaking changes](https://router.vuejs.org/guide/migration/) you should be aware of. There's also the new [Vuex v4](https://vuex.vuejs.org/) too.

#### Vue 3 breaking changes examples

Expand Down Expand Up @@ -323,7 +323,7 @@ If you'd like to use the Vue.js Devtools with Vue 3, you'll need to replace your
For Quasar CLI projects, you don't need to manually install/upgrade the `vue-router` package as "@quasar/app" v3 is already supplying the correct version of Vue Router for you.
:::

This is a Vue 3 ecosystem upstream breaking change. Update src/router files to match Vue Router v4's API. Vue Router v4 comes with its own [breaking changes](https://next.router.vuejs.org/guide/migration/index.html). Especially note below how we are dealing with the 404 error.
This is a Vue 3 ecosystem upstream breaking change. Update src/router files to match Vue Router v4's API. Vue Router v4 comes with its own [breaking changes](https://router.vuejs.org/guide/migration/index.html). Especially note below how we are dealing with the 404 error.

```js
// default src/router/index.js content:
Expand Down Expand Up @@ -384,7 +384,7 @@ $ yarn add vuex@4
$ npm install vuex@4
```

This is a Vue 3 ecosystem upstream breaking change. You'll need to update src/store files to match Vuex v4's API. Notice the "createStore" import from vuex and its usage in an example below. For informative purposes: [Vuex migration to 4.0 from 3.x](https://next.vuex.vuejs.org/guide/migrating-to-4-0-from-3-x.html)
This is a Vue 3 ecosystem upstream breaking change. You'll need to update src/store files to match Vuex v4's API. Notice the "createStore" import from vuex and its usage in an example below. For informative purposes: [Vuex migration to 4.0 from 3.x](https://vuex.vuejs.org/guide/migrating-to-4-0-from-3-x.html)

```js
// default src/store/index.js content:
Expand Down Expand Up @@ -518,7 +518,7 @@ function onClick (e, go) {

#### QBreadcrumbsEl

Removed "append" prop because Vue Router v4 [has also dropped it](https://next.router.vuejs.org/guide/migration/index.html#removal-of-append-prop-in-router-link).
Removed "append" prop because Vue Router v4 [has also dropped it](https://router.vuejs.org/guide/migration/index.html#removal-of-append-prop-in-router-link).
Added "tag" and "ripple" properties.

#### QCarousel
Expand Down Expand Up @@ -551,7 +551,7 @@ Use "class" and "style" attributes instead of "content-class" / "content-style"

#### QExpansionItem

Removed the "append" property because Vue Router v4 [has also dropped it](https://next.router.vuejs.org/guide/migration/index.html#removal-of-append-prop-in-router-link).
Removed the "append" property because Vue Router v4 [has also dropped it](https://router.vuejs.org/guide/migration/index.html#removal-of-append-prop-in-router-link).

#### (New) Connecting to QForm

Expand Down

0 comments on commit 453dfda

Please sign in to comment.