vue

Vue

Project setup

To install dependences, run:

npm install

Compile and hot-reload for development

npm run dev

Compile and minify for production

npm run build

Calcite Components with Vue

To install calcite components, first run:

npm install --save @esri/calcite-components

After Calcite Components is installed, import and call setAssetPath to load the assets:

// src/main.js
import { setAssetPath } from '@esri/calcite-components/dist/components';
setAssetPath(location.href);

Import the Calcite Components when they are used:

// src/components/HelloWorld.vue
import '@esri/calcite-components/dist/components/calcite-button';
import '@esri/calcite-components/dist/components/calcite-icon';
import '@esri/calcite-components/dist/components/calcite-date-picker';

Adding the CSS

The global Calcite Components CSS can be added with a <style> tag in HelloWorld.vue:

<style src="@esri/calcite-components/dist/calcite/calcite.css"></style>

Adding the assets

Static assets must be copied over to the public folder manually. A copy script has been created to make this process easier:

npm run copy

This will copy the assets required by the components to your project's public/assets directory.

Recommended IDE setup

VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).

Customize configuration

See Vite Configuration Reference.