Ynex – Vue3 Premium Bootstrap-5 Admin Template

Note:-

Please refer Faq's page in documentation itself for queries and customization like Colors, RTL, Dark style..etc.

VueJS Setup

Create a workspace and initial application
  1. Run the following command to install the Vue.js CLI globally
  2. npm install -g @vue/cli
  3. GO to directory where you want to create the Vue Project.
  4. Open your terminal or command prompt. With the same directory you are intended.
  5. vue create Your-project-name
  6. Follow the prompts to configure your project. You can choose the features you want to include, such as Routing, SSR, ESLint, and others.
  7. Once After the project is create come to the project directory in command prompt.
  8. cd You-project-name
  9. Run the following command to start your Vue.js application:
  10. npm run dev

    This command will start the development server, and you can access your Vue.js application in your browser at http://localhost:5173.

Ynex Setup

Prerequisites
Node.js

Download latest version of node.js from nodejs.org.
Install Node.js using downloaded file.
To check your node version, run node -v in a terminal/console window (cmd)

Setup an SashTemplate by
  1. Download the Ynex.rar/zip file.
  2. Extract it and then go in to Folder here you will see a Ynux Folders
  3. For Example, Here I'm Choosing Vuejs-file
  4. Here, I'm Choosing Vuejs-file.
  5. Now from a terminal window, navigate to the directory containing your application
  6. Ynex/Vuejs-file>
  7. You can import all dependency by installing npm command
  8. npm install
        (or)
    yarn install
  9. Now you are in stage to successfully run Sashusing below command:
  10. npm run dev
        (or)
    yarn dev
    Once you serve your application by default it will take their default port using http://localhost:5173/
Note

    basically npm install is used to install all dependencies or devDependencies from a package. if there will be any dependencies which need to be installed but getting error message while installing, then use --force will help to install those dependencies.

    The --force argument will force npm to fetch remote resources even if a local copy exists on disk. It will be on a last-dependency-downloaded-wins basis and will overwrite any previously downloaded dependencies.

    npm install --force
Note
    npm install

    If your are using npm install, You have to delete the yarn.lock

    yarn-lock file

    (or)

    yarn install

    If your are using yarn install, You have to delete the package-lock.json

    (or)

    yarn install --network-timeout 1000000

    If yarn will getting timeout issue use this command

    package-lock.json file

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

    basically npm i is used to install all dependencies or devDependencies from a package. if there will be any dependencies which need to be installed but getting error message while installing, then --force will help to install those dependencies.

    The --force argument will force npm to fetch remote resources even if a local copy exists on disk. It will be on a last-dependency-downloaded-wins basis and will overwrite any previously downloaded dependencies.

    npm install --force
    if there is peer dependency issues while installing
    it will always skip peer dependencies (whatever those are) during installation even if there are no issues.
    npm install--legacy-peer-deps

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

Note: Vue3 Application is client side Rendering. So the deployment may differ depending on the way the application want to host. We are describing how to upload the Static Hosting(Static Site Generation)

Static Hosting Vue3 Application

To Upload your static application for host on server using below command:

    Generate the Static Site
  1. Before upload, you should need to make some changes in the vite.config.js file like below if you are uploading into sub-directory, If you are uploading them in public then you can remove or you can add '/'.
  2.                       base: '/vue/ynex/preview/',
                          plugins: [vue(),],
                          resolve: {
                            alias: {
                              '@': fileURLToPath(new URL(import.meta.url))
                            }
                          },
                        
  3. Before uploading, you need to build the static site using the Vue.js build process. Run the following command in your Vue.js project directory:
  4. npm run build

    This command will create a dist directory containing the static files of your Vue.js application.

    Upload those files in your server to access them globally.

Installation Video