# Using Wijmo with Nuxt.js
## Content
Nuxt is a powerful framework built on top of **Vue.js**, designed to simplify the development of **universal (server-side rendered), static, and single-page applications**. It provides a structured and opinionated approach to building Vue applications while enhancing performance, developer experience etc.
Wijmo Components for Vue allow you to use Wijmo controls in a Nuxt.js project. A Wijmo Vue component serves as a wrapper for the Wijmo control, automatically creating the control instance behind the scenes. It provides access to the control via the ref property and enables declarative binding to its properties and events.
> type=note
> **Note:** By default, Nuxt.js applications use Universal mode, which integrates both server-side rendering (SSR) and client-side rendering. However, Wijmo supports the client-side rendering only. Hence, to ensure proper functionality when incorporating Wijmo into a Nuxt.js application, you must disable the server-side rendering by setting the ssr property to false.
>
> ```auto
> export default defineNuxtConfig({ ssr: false })
> ```
Apart from this setting, you can integrate Wijmo in your Nuxt.js application as you do it in a Vue application. For information on how to integrate Wijmo in your Nuxt/Vue application, see Vue Quick Start.
Note that you must use the Nuxt CLI to create a Nuxt application, just like you create a Vue application using Vue CLI. For more information on creating Nuxt application, see [Getting Started with Nuxt](https://nuxt.com/docs/getting-started/installation).
## Nuxt.js Components
Wijmo Vue components are available as separate npm packages. npm package for each component is named after its core library with "vue2" included in the package name. For example, "wijmo.vue2.grid" package represents components for controls from the core "wijmo.grid" package. You can install the components individually or all of them at once with "wijmo.vue2.all."
```auto
npm install @mescius/wijmo.vue2.all
```
For more information on Wijmo npm packages, refer to the topic **[Reference Wijmo Packages](/wijmo/docs/GettingStarted/Referencing-Wijmo-NPM)*.***
In the Nuxt.JS project, the Wijmo components and directives can be directly imported from the wijmo.vue2 packages and can be used in the component by using **Custom component-level registration** methods only. Refer to the **Vue 3 Components** topic, for details on these methods.
> type=note
> **Note*:*** Wijmo *components* are intended for a usage in Nuxt.js app as component.
If you want to create a Wijmo control in code, you should use a Wijmo *control* from a core module for this purpose, instead of a component. A core module has the same name as a corresponding Vue interop module, but without the "vue" word in the name. For example, this code creates a FlexGrid control in the code:
```auto
import { FlexGrid } from '@mescius/wijmo.grid';
onMounted(() => {
grid = new FlexGrid("#host_element");})
```
### Adding Wijmo CSS
Wijmo ships **@mescius/wijmo.styles** npm package which contains the following two files:
* Wijmo.css - includes styles for all controls
* wijmo-core.css - truncated version of wijmo.css. It excludes styles for Enterprise controls.
You can load the styles in your component that uses Wijmo controls, using this ESM import statement.
```auto
import '@mescius/wijmo.styles/wijmo.css';
```
### Nuxt.js Markup Syntax
Wijmo Vue components use [Vue3 naming conventions](https://vuejs.org/guide/components/registration.html#component-name-casing) in template markup. It supports **low-case-dash** and **camelCase** syntax to specify the component, its properties, and events as follows:
```auto
//low-dash-case
// camelCase
```
### DataFlow with attributes
* In case of one-way binding, prepend the names with the **v-bind:** directive (or its **':'** shorthand), except while binding a string type property to a string constant. One-way binding is used to set the property’s value or event handler.
* For the two-way binding between form inputs and component data, use the v-model directive. When you use v-model, Vue automatically handles updating the data property and the input element's value.
```auto
//binding to Boolean
```
#### Event handlers
Wijmo event handlers are defined as functions with two parameters: sender and event argument. While binding to a component event, you must specify the name of a function with this signature.
```auto
```
#### The "initialized" Event
All Wijmo Vue components have an initialized event, triggered after the control is added to the page and has been initialized. You can use this event for extra setup beyond setting properties in markup. The signature of the handler function is the same as any other Wijmo event handlers.
```auto
```