Skip to content

185658-Ej2-Vue-Getting-Started #384

New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

#

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Open
wants to merge 3 commits into
base: hotfix/hotfix-v26.2.4
Choose a base branch
from
Open

185658-Ej2-Vue-Getting-Started #384

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2e2ac90
185658-Ej2-Vue-Getting-Started
Faith-Atieno Jul 8, 2024
8d96a8a
Ci issue resolved
Faith-Atieno Jul 8, 2024
a404cfe
Ci issue resolved
Faith-Atieno Jul 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions ej2-vue/getting-started/direct-scripts.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ domainurl: ##DomainURL##

<!-- markdownlint-disable MD024 -->

# Getting Started with Syncfusion Vue UI Components using direct scripts in a quickstart application
# Getting Started with Syncfusion Vue UI in a quickstart application
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this content reviewed?



Vue provides native script support, allowing users to directly include the Vue.js library in an HTML file without the need for a build process or module bundler. This feature is useful for simpler projects or prototypes, enabling quick and easy implementation of Vue.js without setting up a complex build workflow.
Expand All @@ -20,7 +20,7 @@ Similarly, Syncfusion offers direct script support for its Vue components. Devel

## Prerequisites

* Any IDE, such as [Visual Studio Code](https://code.visualstudio.com/)
* Any IDE, such as [Visual Studio Code](https://code.visualstudio.com)

## Set up the Vue project

Expand All @@ -30,7 +30,7 @@ To demonstrate the usage of the `Grid` component through direct scripting, follo

2\. Inside the `quickstart` folder, create an HTML file named `index.html`.

Include the appropriate version of the Vue.js library in the **index.html** file based on whether to use [Vue 2](https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.min.js) or [Vue 3](https://unpkg.com/vue@3/dist/vue.global.js) in the project. Then, create a new Vue instance with the required configuration options.
Include the appropriate version of the Vue.js library in the **index.html** file based on whether to use [Vue 2](https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.min.js) or [Vue 3](https://unpkg.com/vue@3.4.31/dist/vue.global.js) in the project. Then, create a new Vue instance with the required configuration options.

> The [Vue class component](https://class-component.vuejs.org) package is required before the 2023 Volume 1 (v21.1.35) release. So, add the [Vue class component](<https://cdn.jsdelivr.net/npm/vue-class-component@8.0.0-rc.1/dist/vue-class-component.global.min.js>) script to the head section of the **index.html** file for Vue 3 direct script.

Expand Down Expand Up @@ -67,7 +67,7 @@ Include the appropriate version of the Vue.js library in the **index.html** file

## Import Syncfusion CSS styles

You can import themes for the Syncfusion Vue component in various ways, such as using CSS from CDN, [CRG] and [Theme Studio](https://ej2.syncfusion.com/vue/documentation/appearance/theme-studio/). Refer to [themes topic](https://ej2.syncfusion.com/vue/documentation/appearance/theme/) to know more about built-in themes and different ways to refer to themes in a Vue project.
You can import themes for the Syncfusion Vue component in various ways, such as using CSS from CDN, [CRG] and [Theme Studio](https://ej2.syncfusion.com/vue/documentation/appearance/theme-studio). Refer to [themes topic](https://ej2.syncfusion.com/vue/documentation/appearance/theme) to know more about built-in themes and different ways to refer to themes in a Vue project.

In this article, `Material` theme is applied using CSS styles, which are available in CDN. Add the `Material` CSS styles to the head section of the **index.html** file.

Expand Down Expand Up @@ -119,7 +119,7 @@ To integrate Syncfusion components into your application, add the required Syncf
{% endhighlight %}
{% endtabs %}

2\. Add the component to the `<body>` section of the **index.html** file. Bind the [data-source](https://ej2.syncfusion.com/vue/documentation/api/grid/#datasource) property and inject the `Page` module. Follow the [Getting Started](https://ej2.syncfusion.com/vue/documentation/grid/getting-started/) documentation for further details.
2\. Add the component to the `<body>` section of the **index.html** file. Bind the [data-source](https://ej2.syncfusion.com/vue/documentation/api/grid/#datasource) property and inject the `Page` module. Follow the [Getting Started](https://ej2.syncfusion.com/vue/documentation/grid/getting-started) documentation for further details.

> While using Syncfusion Vue components in a direct script way, camel-cased property (isPrimaryKey) names need to be specified in the kebab-cased (is-primary-key) equivalents.

Expand Down