Nilova – Inertia, Svelte, and Laravel Premium Admin & Dashboard Template that combines modern and minimal design with full flexibility and responsiveness. It’s crafted using Svelte , Inertia.js , Laravel , CSS3 ,Sveltestrap and Bootstrap offering seamless customization with SASS integration. Whether you’re building a web application, admin dashboard, or project management platform, this template ensures your site stands out with ease.

Support and Updates:

When you purchase Nilova, you gain access to free future updates to ensure your template remains up-to-date. Plus, our support team is always ready to assist with any questions.

What Do You Get with the Nilova:

Nilova provides all necessary PHP,Svelte, CSS, SCSS, Js files, along with detailed Documentation to help you easily customize and implement the template.

Nilova Compatibility with Popular Browsers:

Nilova is fully compatible with major browsers, ensuring a seamless user experience across Chrome, Firefox, Safari, Edge, and Opera.

Setting Up The Local Environment & Workspace

This comprehensive guide provides step-by-step instructions on how to set up your development environment for Vite using the Svelte,Laravel tool. It covers everything from the necessary prerequisites to installing the tool, creating an initial workspace, and setting up a starter app. You'll also learn how to run the app locally to test and verify your setup. By following this guide, you can ensure that your development environment is properly configured for Vite and Svelte, and you can get started with your project confidently and efficiently. Whether you're a beginner or an experienced developer, this guide is an essential resource for anyone looking to work with Vite and Svelte.

To get started with a Svelte application, there are some prerequisites that you need to have in place.

Prerequisites

• Xampp
• Composer
• Svelte
• vite
• Sveltestrap
• Bootstrap
• Javascript

To install vite on your local System, you need the following:

Node.JS

vite requires a current, active LTS (long term support) or maintenance LTS (long term support) version of Node.js.

Npm package Manager

The vite and Svelte applications depend on npm packages for many features and functions.
To download and install npm packages, you need an npm package manager.
This guide uses the npm client command line interface, which is installed with Node.js by default. To check that you have the npm client installed,run npm -v in a terminal/console window (cmd) For better understanding Svelte we suggest you once go through official documentation of Svelte from Vue Documentation and vite for  Vite documentation

Installation Process of Composer

In order to run Laravel we need to install composer by the following steps

Steps to Download & Installation of Composer

Step1: Please visit the Official Web Site of the Composer www.getcomposer.org

Step2: Click on the Download option

Step3: Click on the Composer-Setup.exe you are done with download

Step4: Now Right click on the Composer-Setup.exe file and select Run as administrator click on Yes

Step5: You'll be getting two options click as per your choice

Step6: I choose Recommended option here and if your developer you can check the box of the Developer Mode

Step7: And click on the Next button please make sure of installation path and then click Next

Step8: You'll be asked to enter proxy url please skip the step and click on the Next button

Step9: Please make sure with the PHP Version it should not be less than 8.2v, here we used 8.2.12 Version and then click on the next button

Step10: To confirm that Composer is installed in your system then type Composer in command prompt (if you are using XAMPP then go to C:\xampp\htdocs location and type composer)

How to Run the Nilova Template:

If you have installed XAMPP on your machine then please follow the below steps

Step:1 Quick view of Installations

1. Download and Install the Composer from official site https://getcomposer.org/

2. Install Laravel by using Composer as mentioned in the installation process above.

Step:2 Run project

1. Extract the zip folder of the laravel project in the path: EX: C:\xampp\htdocs\ that you have received after purchase.

2. Once the extraction is completed for accessing the laravel project, open command prompt or terminal and set your project root path: Example: C:\xampp\htdocs\

3. Open the terminal and set the root path of your template and then run the following command: "composer install" only if it is required to update your "vendor" directory.

4. Now run the below commands in the terminal to get the output of the project. To get the node_modules install.

To get the node_modules install.

 npm install 

To get the build assets of the project.

 npm run build 

And run the command line:

npm run dev 

 php artisan serve 

Laravel development server started: http://127.0.0.1:8000, now type the url in the browser to access the project.

Inertia Setup Guidance

Inertia.js acts as a bridge between your Laravel backend and Svelte frontend, allowing you to build modern SPAs without the complexity of managing APIs or client-side routing manually.

1.Server-side Setup:

The first step when installing Inertia is to configure your server-side framework. Inertia maintains an official server-side adapter for Laravel.

The setup includes Laravel’s powerful routing system and controllers, with Inertia’s Laravel adapter responsible for returning views as Svelte components instead of traditional Blade templates. This allows developers to write backend logic in Laravel as usual, while seamlessly passing data to Svelte components via Inertia.

First, install the Inertia server-side adapter using the Composer package manager.

composer require inertiajs/inertia-laravel 

Next, set up the root Blade template that will be used when a user first visits your application. This template is responsible for loading your CSS and JavaScript assets, and it must include a root where your JavaScript frontend (Svelte via Inertia) will be mounted.

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title inertia>Nilova - Inertia + Svelte & Laravel Admin & Dashboard Template
    <!-- Favicon -->
    <link rel="icon" href="{{asset('/images/brand-logos/favicon.ico')}}" type="image/x-icon">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap">
    <link href="https://cdn.jsdelivr.net/npm/dragula@3.7.3/dist/dragula.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://unpkg.com/quill@2.0.2/dist/quill.snow.css" crossorigin="anonymous" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gridjs/dist/theme/mermaid.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jsvectormap/dist/jsvectormap.min.css" />
    <!-- ICONS CSS -->
    <link href="{{asset('/icon-fonts/icons.css')}}" rel="stylesheet">

    @vite('resources/js/app.js')
    @inertiaHead
</head>

<body>
    @inertia
</body>

<script src="https://cdn.jsdelivr.net/npm/swiper@12/swiper-element-bundle.min.js">
<script src="https://cdn.jsdelivr.net/npm/dragula@3.7.3/dist/dragula.min.js">
<script src="https://cdn.jsdelivr.net/npm/jsvectormap">
<script src="https://cdn.jsdelivr.net/npm/jsvectormap/dist/maps/world.js">

</html>

2.Client-side Setup:

Once you have your server-side framework configured, you then need to setup your client-side framework. Inertia currently provides support for Vue, React, and Svelte..

First, install the Inertia client-side adapter corresponding to your framework of choice.

npm install @inertiajs/svelte
                                            

Initialize the Inertia app

Next, update your main JavaScript file to boot your Inertia app. To accomplish this, we'll initialize the client-side framework with the base Inertia component.

// app.js

import './bootstrap';
import { createInertiaApp } from '@inertiajs/svelte'
import { mount } from 'svelte'
import '../css/app.scss'
import '../css/scss/switcher.scss'
createInertiaApp({
  resolve: name => {
    const pages = import.meta.glob('./Pages/**/*.svelte', { eager: true })
    return pages[`./Pages/${name}.svelte`]
  },
  setup({ el, App, props }) {
    mount(App, { target: el, props })
  },
})

// 🔥 Global click handler to prevent scroll for dummy anchors
document.addEventListener('click', (e) => {
  const target = e.target.closest('a');
  if (!target) return;

  const href = target.getAttribute('href');
  if (href === '#' || href === '#!') {
    e.preventDefault();
  }
});
                                            

How to Create a New Page

To create a new page in a Laravel + Inertia.js + Svelte application, start by adding a new Svelte component inside the resources/js/Pages directory—for example, Newpage.svelte. This file will contain the structure and content of your new page using svelte. Next, define a corresponding route in Laravel’s routes/web.php file using the Inertia::render() method, which connects the URL path to the Svelte component. Once the route is set, visiting that URL in the browser will render your new Svelte page. Optionally, you can integrate the new page into your navigation menu using the Inertia Link component and wrap it in a layout component for a consistent UI.

Note:

If your are using "npm install", You should need to delete the "package-lock.json file" from project root.

To install the peer Depencies

In general, the npm i command is used to install all dependencies or devDependencies from a package. However, sometimes you may encounter errors while installing certain dependencies. In such cases, the --force argument can be used to force npm to install those dependencies.

Using the --force argument can be helpful when you need to install a specific dependency that is causing issues during installation. However, it should be used with caution, as it can potentially cause conflicts with other dependencies or lead to unexpected behavior. It's always a good idea to thoroughly test your application after using the --force argument to ensure that everything is working as expected.

npm install --force

Skipping the installation of peer dependencies can sometimes lead to issues with the functionality or compatibility of the package. To ensure that your package functions correctly, it's important to manually install any missing peer dependencies using the npm install command. When installing peer dependencies, you should also be aware of the potential for conflicts with other packages or dependencies. It's a good idea to carefully review the peer dependencies required by each package and ensure that they are compatible with other packages in your project. By taking these steps, you can avoid potential issues and ensure that your packages are installed and functioning correctly.

npm install--legacy-peer-deps

We have to use only one file example: (for yarn yarn-lock) & (for npm package-lock.json) file

For Build your Template

Build your application for host on server using below command:

npm run build
                                        

"Similarly, the starter kit can be installed as well."

Introduction to the Nilova Template Starter Kit:

The Nilova template starter kit is a resource that helps developers kickstart their Nilova web development projects by providing a preconfigured and ready-to-use template. It aims to simplify the initial setup and provide a foundation for building Inertia + Svelte & Laravel-based websites or applications.

Purpose of the Nilova Template Starter Kit:

The purpose of the Nilova template starter kit is to save developers time and effort by offering a set of prebuilt files and configurations commonly used in Nilova projects. Instead of starting from scratch, developers can leverage the starter kit to quickly set up a project structure that adderes to best practices and industry standards.

Benefits of Using the Nilova Template Starter Kit:

The starter kit eliminates the need to set up the basic project structure manually. It provides a well-organized file and folder structure, including commonly used directories for separating code, templates, assets, and configuration files. This allows developers to focus more on implementing business logic rather than spending time on initial setup.
Before using the Nilova template starter kit, developers should have a basic understanding of Inertia + Svelte & Laravel and web development concepts. Additionally, they should have a web server environment LaInertia + Svelte & Laravelravel installed on their local machines or a hosting server. Familiarity with Svelte, CSS, and JavaScript is also beneficial for frontend development aspects.

Starterkit Overview

You can use the Starterkit if you are creating a new project. It will be time-consuming to use the full admin version for a new project as Nilova have more than 180 pages.

We have provided all the pre-build layouts like Sidemenu, Header, Footer and Scripts etc in the Starterkit.

For further information or support regarding the template, please contact us using the provided link:https://support.spruko.com/

• Take a look at the folder structure of the "Starterkit."
• Integration of your customized .svelte pages becomes easy when using the "Starterkit."
• The "Starterkit" provides all the layout components and related assets.
• To explore the contents of the "Starterkit," unzip the project folder received after purchase.
Navigate to the following paths:
• Example: resources/js/layouts - This folder contains files such as Authlayout.svelte, Landinglayout.svelte ,etc.
• Example: resources/js/Pages/new folder create - Add your Svelte pages here if you have more.

Basic Layout Structure

Main Layout structure of the Nilova template .Root:resources\js\layouts\MainLayout.svelte

<script>
    import { onMount } from "svelte";
    import Switcher from "@/components/switcher/Switcher.svelte";
    import Sidebar from "@/components/sidebar/Sidebar.svelte";
    import Header from "@/components/header/Header.svelte";
    import BackToTop from "@/components/backToTop/BackToTop.svelte";
    import Footer from "@/components/footer/Footer.svelte";
    import ThemeInitializer from "@/utility/ThemeInitializer.svelte";
    import { themeStore } from "@/components/switcher/switcher";

    let themeLoaded = false;
    let progressRef: any;
    onMount(() => {
        const handleScroll = () => {
            const scrollTop =
                document.documentElement.scrollTop || document.body.scrollTop;
            const scrollHeight =
                document.documentElement.scrollHeight -
                document.documentElement.clientHeight;
            const scrollPercent = (scrollTop / scrollHeight) * 100;

            if (progressRef) {
                progressRef.style.width = `${scrollPercent}%`;
            }
        };

        themeStore.retrieveUserLocalStorage();
        themeLoaded = true;

        window.addEventListener("scroll", handleScroll);
        return () => {
            window.removeEventListener("scroll", handleScroll);
            themeLoaded = false;
        };
    });

    //  offcanvas handling via props
    let isOpen = false;
    const toggle = () => (isOpen = !isOpen);
</script>

<div style={`display: ${themeLoaded ? "block" : "none"};`}>
    <div bind:this={progressRef} class="progress-top-bar">
    <div class="page">
        <Header {toggle} />
        <Sidebar />
        <div class="main-content app-content">
            <div class="container-fluid page-container main-body-container" >
                <slot />
            </div>
        </div>
        <Footer />
    </div>
    <BackToTop />
</div>
    
                                        

General Svelte file structure of the Nilova template .resources\js\Pages\pages\empty\empty.svelte

    
        
<script context="module">
    import MainLayout from '@/layouts/MainLayout.svelte';
    export const layout = MainLayout; 
</script>
<script>
    import { Card, CardBody, Col, Row } from "@sveltestrap/sveltestrap";
    import Pageheader from "@/components/page-header/Pageheader.svelte";
</script>

<!-- Page Title -->
<svelte:head>
    
</svelte:head>
<!-- Page Title Close -->
<!-- Page Header -->
<Pageheader homepage="Empty" activepage="Pages" page="Empty" />
<!-- Page Header Close -->

<!-- Start::row-1 -->

<Row>
    <Col xl={12}>
        <Card class="custom-card">
            <CardBody>
                <h6 class="mb-0">Empty Card
             </CardBody>
        </Card>
    </Col>
</Row>

<!--End::row-1 -->

Sidemenu Layout Structure

How to Add Menus to Sidebar.

In Svelte project, it can be easy to add menus to the sidebar by modifying the MenuItems array in the nav.js resources\js\components\sidebar\nav.js file. The sidebar will dynamically display the menus based on the contents of this array. below are the steps as follows

Steps:

Open nav.js File:

Open the nav.js resources\js\components\sidebar\nav.js file in Svelte project. This file contains the menuData array that defines the menus to be displayed in the sidebar.

To add the parent Menu Items:

Inside the menuData array, you can add your menu items using the following format:

To add the children to Menu Items:

Inside the menuData array, you can add custom nested menu items using the following format:

Save the Changes:

After adding your menu items, save the changes made to the nav.js resources\js\components\sidebar\nav.js file.

View Sidebar Changes:

The sidebar will now automatically display the added menu items based on the modifications you made in the menuData array.

To Remove the Menu Items:

To remove menu items that you don't need, you can simply delete the corresponding object from the menuData array.

By following these steps, you can easily customize and add menus to the sidebar of your Svelte project. The menus will be dynamically generated based on the content of the menuData array in the nav.js file.

Routing

Basic Route

Following are the fundamental building blocks to creating a route web.php

    
Route::get('', function () {
    return Inertia::render('Login');
});
Route::get('dashboards/sales', action: function () {
    return Inertia::render('dashboards/sales'); // your React component
});

Route::get('dashboards/analytics', function () {
    return Inertia::render('dashboards/analytics'); // your React component
});

Route::get('dashboards/ecommerce/dashboard', function () {
    return Inertia::render('dashboards/ecommerce/dashboard');
});
    .......etc.
                                            

Configure Link in Menu

To Add new link in Sidemenu

Following are the fundamental building blocks to creating a new link.

    ├──sidebar
            ├── nav.js
                export const menuData = [
                {
                    menutitle: 'MAIN'
                },
                {
                    title: "Dashboards", icon: Svgicons.Dashboardicon, type: "sub", active: false, dirchange: false, children: [
            
                      { path: "/dashboards/sales", icon: Svgicons.Salesicon, type: "link", active: false, selected: false, dirchange: false, title: "Sales" },
                      { path: "/dashboards/analytics", icon: Svgicons.Analyticsicon, type: "link", active: false, selected: false, dirchange: false, title: "Analytics" },
                    {......}
                    ]
                }
              ]