Permalink
Branch: master
Find file Copy path
49 lines (48 sloc) 7.37 KB
{
"header": "# Quick start",
"headerText": "Use one of the Vuetify Vue CLI packages _(based on the official examples)_ to get your project started in no time. Vuetify supports **SSR** (server-side rendering), **SPA** (single page application), **PWA** (progressive web application) and standard **HTML** pages.",
"vueCliHeader": "## Vue CLI-3 Install",
"vueCliText1": "Vue-CLI 3 is the next generation cli tool made to help you get started more easily than before. When you start your app with vue-cli you will also be able to get the official webpack updates and config changes, as well as Vuetify's updates without an arduous upgrade process.",
"vueCliText2": "For information on how to use Vue-CLI-3, visit the [official documentation](https://cli.vuejs.org/guide/)",
"vueCliText3": "**Tip**: If you already have **vue-cli** installed, make sure you are on the latest version by typing <kbd>vue --version</kbd> into your cli.",
"vueCliText4": "Once the cli is installed, you can generate a new project scaffold. Select the _default install_ unless you have specific packages that you need to include (e.g. _vuex_ or _vue-router_). This will create a new Vue project that's ready to go with your selected options.",
"vueCliText5": "Now that you have an instantiated project, you can add the [Vuetify package](https://github.com/vuetifyjs/vue-cli-plugin-vuetify) using the cli.",
"vueCliText6": "This will provide you with a set of options for customizing your installation. The default preset has [a-la-carte](/framework/a-la-carte) already enabled for you.",
"vueCliText7": "After installation simply run <kbd>yarn serve</kbd> or <kbd>npm run serve</kbd> to start your application.",
"uiHeader": "## Vue UI",
"uiText1": "Vuetify can also be installed using **Vue UI**, the new visual application for _vue-cli-3_. Ensure that you have the latest version of vue-cli installed and from your terminal type:",
"uiText2": "This will start the Vue User Interface and open a [new window](http://localhost:8000) in your browser. On the left side of your screen, click on **Plugins**. Once navigated, simply search for _Vuetify_ in the input field.",
"uiImg1": "Install Vuetify Plugin",
"uiImg2": "Configure your Vuetify installation",
"uiText3": "After installation, you will have the option to configure your application's default Vuetify settings.",
"browserHeader": "## Supported Browsers",
"browserText": "Vuetify is a progressive framework that attempts to push web development to the next level. In order to best accomplish this task, some sacrifices had to be made in terms of support for older versions of Internet Explorer. This is not an exhaustive list of compatible browsers, but the main targeted ones.",
"cdnHeader": "## CDN Install",
"cdnText": "To test using Vuetify.js without installing a template from Vue CLI, copy the code below into your `index.html`. This will pull the latest version of Vue and Vuetify, allowing you to start playing with components. You can also use the [Vuetify starter](https://template.vuetifyjs.com) on codepen.",
"newHeader": "## New applications",
"newAlert": "These packages require `vue-cli@2`. If you are starting a brand new application, it is recommended to use `vue-cli@3`. The below packages are currently being converted to use the new system. For more information on using **version 3**, [click here](#vue-cli-3)",
"newText": "Vuetify has 8 pre-made Vue CLI templates, 3 which are forked from [official Vue.js templates](https://github.com/vuejs-templates). They contain small modifications to help you get started with Vuetify even faster. These templates are designed to get you started as fast as possible with your next project.",
"existingHeader": "## Existing applications",
"existingAlert": "If your existing application is using `vue-cli@3`, please use the [above guide](#vue-cli-3) on how to install the Vuetify package.",
"existingText1": "To include Vuetify into an existing project, you must install its _npm package_. You can use either `npm` or `yarn` to accomplish this task. These are both package managers that allow you to control what resources are available in your application.",
"existingText2": "For a detailed explanation of how to get `npm` running in your environment, check out the [official documentation](https://docs.npmjs.com/getting-started/what-is-npm). Alternatively, if you wish to use yarn, you can find the official documentation [here](https://yarnpkg.com/lang/en/docs/). Once setup, you can run either command from your command prompt.",
"existingText3": "Once Vuetify has been installed, navigate to your application's main entry point. In most cases this will be `index.js` or `main.js`. In this file you will import Vuetify and tell Vue to use it.",
"existingText4": "You will also need to include the Vuetify css file. Simply include the Vuetify css file in your `index.html` or import the actual stylus file or the minified css.",
"existingText5": "Some components like the date picker use Material Icons. The easiest way to include them is to add a `link` tag to your `index.html` file.",
"existingText6": "Alternatively use `npm` or `yarn` to install `material-design-icons-iconfont`.",
"existingText7": "You can also asynchronously load the fonts. For this, use `npm` or `yarn` to install `webfontloader`.",
"alert2": "*Warning*: While Vuetify attempts to not cause any css collision as much as possible, there is no guarantee that your custom styles will not alter your experience when integrating this framework into your existing project.",
"ie11Header": "## IE11 & Safari 9 support",
"ie11Text": "Vuetify utilizes features of ES2015/2017 that require the need to use polyfills for **Internet Explorer 11** and **Safari 9/10**. If you are using vue-cli-3, this is done automatically for you. Otherwise, in your project directory, you can install `babel-polyfill`:",
"ie11Text1": "Vuetify utilizes features of ES2015/2017 that require the need to use polyfills for **Internet Explorer 11** and **Safari 9/10**. If you are using vue-cli-3, this is done automatically for you. Otherwise, in your project directory, you can install `babel-polyfill`:",
"ie11Text2": "It is important to include the plugin as early as possible within your main **index.js** file. If using a Vuetify SSR package, this will apply to the **client-entry.js** file",
"ie11Text3": "It is recommended that you use `babel-preset-env` with the corresponding polyfill to ensure only the necessary polyfills are added to your application. For more information on `babel-present-env`, [visit the documentation](https://babeljs.io/docs/en/next/babel-preset-env.html)",
"ie11Text4": "Once installed, add the preset to your `.babelrc` or `babel.config.js`",
"ie11Text5": "Unfortunately vue-cli-3 doesn't automatically bring IE11 compatibility in which you may encounter various errors (such as <i>Symbol is not defined</i>). To assist in resolving these errors you may need to manually add `transpileDependencies` parameter in `vue.config.js`",
"ie11Text6": "Due to Internet Explorer's limited support for `<template>` tags, you must send fully compiled dom elements to the browser. This can be done by either building your Vue code in advance or by creating helper components to replace the dom elements. For instance, if sent directly to IE, this will fail:",
"browserSupport": {
"supported": "Supported",
"notSupported": "Not supported",
"polyfill": "Supported with polyfill"
}
}