Pages

Pages are very pawerful. You can create anything you want. In VitNode creating a page is very simple. Just you have to remember few things.

VitNode uses NextJS - Pages and Layouts (opens in a new tab) for display pages.

File Directory

We're created a layout for you with margines and paddings. You can use it for your page by creating a file page.tsx in:

- - - - ...

Example based on forum plugin:

- - - - page.tsx

But if you don't want to have paddings and margins you can create a file page.tsx outside of (container) folder:

- - - - ...

Example based on forum plugin:

- - - - page.tsx

Page Structure

Base schema

export default function Page() {
  return ...;
}

Create Template

In VitNode we have Themes System which allows user to change the look of the page.

In themes/1/{your_plugin} you can create your own template for the page.

- - - ...

For example based on forum plugin:

frontend/themes/1/forum/views/forums/forums-view.tsx

export default function ForumsView() {
  return <div>Hi from ForumsView!</div>;
}

ℹ️

Inside themes/1/{your_plugin} you can create as many files as you want. VitNode will also export them when you build the plugin.

❌

Use always export default for your template. Otherwise it won't work.

Use Template

Get theme id

Let's go back to our page.tsx and use our template and get theme_id from getSessionData() function.

import { getSessionData } from '@/functions/get-session-data';
 
export default function Page() {
  const { theme_id } = await getSessionData();
 
  return ...;
}

Import lazy component

import { lazy, type LazyExoticComponent } from 'react';
 
import { getSessionData } from '@/functions/get-session-data';
 
export default function Page() {
  const { theme_id } = await getSessionData();
  const PageFromTheme: LazyExoticComponent<() => JSX.Element> = lazy(() =>
    import(`@/themes/${theme_id}/forum/views/forums/forums-view`).catch(
      () => import('@/themes/1/forum/views/forums/forums-view')
    )
  );
 
  return <PageFromTheme />;
}

ℹ️

We're using catch to import default theme if the theme doesn't exist. Theme 1 is always on your server.

Lazy loading with props

You can also pass props to your template. Let's go back to themes folder and create a interface.

export interface ForumsViewProps {
  title: string;
}
 
export default function ForumsView({ title }: ForumsViewProps) {
  return <div>Hi from ForumsView - {tille}!</div>;
}

❌

Remember to use export interface for your props. We're using it to pass props to the template.

Next go back to page.tsx and pass props to your template.

import { lazy, type LazyExoticComponent } from 'react';
 
import { getSessionData } from '@/functions/get-session-data';
import { type ForumsViewProps } from '@/themes/1/forum/views/forums/forums-view';
 
export default function Page() {
  const { theme_id } = await getSessionData();
  const PageFromTheme: LazyExoticComponent<(props: ForumsViewProps) => JSX.Element> = lazy(() =>
    import(`@/themes/${theme_id}/forum/views/forums/forums-view`).catch(
      () => import('@/themes/1/forum/views/forums/forums-view')
    )
  );
 
  const title = 'This is title!';
 
  return <PageFromTheme title={title} />;
}

Logic and Data

As we mentioned before, VitNode uses Themes System so you cannot create logic inside your template like fetching data, using hooks etc.

VitNode has own hooks folders for logic and data.

Create hook

Create a folder in frontend/hooks/{your_plugin}.

For example in frontend/hooks/{your_plugin}/forums/use-forums.ts and put your logic there.

- - - use-forums.ts

export const useForums = () => {
  const [forumCount, setForumCount] = useState(0);
 
  return {
    forumCount,
    setForumCount
  };
};

Use hook

Now you can use your hook in your template.

'use client';
 
import { useForums } from '@/hooks/forum/forums/use-forums';
 
export interface ForumsViewProps {
  title: string;
}
 
export default function ForumsView({ title }: ForumsViewProps) {
  const { forumCount, setForumCount } = useForums();
 
  return (
    <div>
      <div>Hi from ForumsView - {tille}!</div>
      <div>Forum count: {forumCount}</div>
      <button type="button" onClick={() => setForumCount(10)}>
        Set 10 count
      </button>
    </div>
  );
}

ℹ️

use client is used here, bacause we're using useState from react and we're used use prefix. If you want to use logic on the server side, you need to change prefix function to something else, for example getForums() (Insted of useForums()).

Create Layout

Creating a layout is the same as creating a page. Read more about it in NextJS Documentation (opens in a new tab).

Colors GraphQL