DS Log

In my blog, I delve into the world of programming web technologies, Linux, Unix-like, and graphic design using free tools on Linux.

KINGCODE

KingCode Editor (ex Texty Editor) is my project developed using Java Swing. Project is still in development and in beta version. I plan to add additional features focused for PYTHON, PHP, JAVA, C, JS and BASH.

Read more ↗

Featured

VUE on Linux

In this guide, I'll walk you through the step-by-step process of setting up Vue.js on your Linux system, empowering you to create dynamic and interactive web applications. Let's harness the power of Vue.js together on the Linux platform!

Read more ↗

Symfony PHP

Dive into the world of Symfony PHP with this comprehensive introduction. In this guide, you'll learn the essential steps to create and manage posts and users, empowering you to build dynamic web applications with ease.

Read more ↗

New

Text editors

List of text editors for developers.

Read more ↗

New

Fonts

Important fonts everyone needs to know.

Read more ↗

New

Try Linux from Windows

Here are some quick videos I made showing how to try out Linux Mint on Windows.

Read more ↗

Latest

Tuesday, June 25, 2024

VUE on Linux

Vue.js is a JavaScript framework for building user interfaces (UI) and one of the most popular frameworks for web application development. It is a progressive framework that focuses on declarative programming, ease of use, and fast development.

In short, Vue.js enables the development of dynamic web pages and applications, allowing developers to easily connect data with user interfaces and create interactive applications. Vue.js is frequently used for building simplified, modern, and fast web applications.

I need Vue.js because I am looking for a framework that works well with vanilla JS, jQuery, and Bootstrap templates. Additionally, I plan to host the pages on Firebase and other affordable web space providers.

Install

To install global command "vue" use:

 sudo npm install -g @vue/cli

Sometime there might be installation issues if we already had vue installed, so do this just in case:

 sudo rm /usr/bin/vue

...and let's create project:

 vue create my-project

Select “Manually select features”…

With space button select “Babel” and “Router”…

Select 3.x version:

Press "Y" for history mode in router...

“In dedicated config files”…

There is also option to save file as preset, press [Y]

Next, eenter into "my-project” and install libs:

 npm install vuex

And at end, run server!

 npm run serve

index.html

In index.html we will add css framework and web font

 <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>myproject</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <link href="https://cdn.lineicons.com/4.0/lineicons.css" rel="stylesheet" />
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

App.vue

App.vue is the main component in Vue.js projects, which represents the main component of your web application. In this file, you define the structure and appearance of the main frame of your application.

<template>
  <nav>
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </nav>
  <router-view/>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}
</style>

These are key parts of App.vue:

<template>	This is the HTML part of your component where you define the structure of your application. Inside the <template>, you can have HTML tags for the header, main content, and footer of your website. You can also use Vue directives for dynamic data display.
<script>	Here you can write JavaScript code for your component. In the example of App.vue, it usually doesn't contain much business logic as it is meant for managing the layout and communication between different parts of the application.
name	This is the name of the component, in this case, "App".
<router-link>	This is a special tag used to display components based on the current URL route. It is used when utilizing Vue Router to navigate between different pages or routes in your application.
<style>	Here you can define CSS styles for the appearance of your application. Styles defined within this section will apply only to this component.

The content of the App.vue file is the foundation of your Vue.js application. Within it, you can add and manage other components to build a complete web application.

Component

A Vue component is a reusable file that contains HTML, CSS, and JavaScript. Components can be used to create complex user interfaces by composing smaller, more manageable parts.

Of course. A Vue component is a reusable piece of code that contains HTML, CSS, and JavaScript. Components can be used to create complex user interfaces by composing smaller, more manageable units.

The basic content of a Vue component consists of three parts:

Group <template>, that is HTML part of component.
Group <script>, that is javascript part of component.
Group <style>, that is CSS style part of component.
Here's example of Vue component: /components/MyTest.vue:

<template>
  <div>
    <h1>Test Komponenta</h1>
  </div>
</template>

<script>
export default {
  name: 'MyTest',
}
</script>

<style>
.my-test {
  background-color: red;
}
</style>

We can try component in App.vue

<template>
  <nav>
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </nav>
  <router-view/>  
  <test-component></test-component>
</template>


<script>

import MyTest from './components/MyTest.vue';

export default {
  name: 'App',
   components: {
    'test-component': MyTest, 
  }
}
</script>



<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}
</style>

Okay, now lets try Bootstrap 5. We can take code from web page

 https://getbootstrap.com/docs/5.0/components/buttons/

We have icons on:

 https://lineicons.com/icons/

And in "MyTest.vue" component we add:

<template>
  <div>
    <h1>Test Komponenta</h1>
    <button type="button" class="btn btn-primary btn-lg"><i class="lni lni-vuejs"></i> Large button</button>
  </div>
</template>

<script>
export default {
  name: 'MyTest',
}
</script>

<style>
.my-test {
  background-color: red;
}
</style>

Router

With a router, we can link a URL path to a component. For example, we can link the path "/admin/login" to the component "/components/admin/AdminLogin.vue". We configure the router in the file "/src/router/index.js".


import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

It's important that we import component:

 import HomeView from '../views/HomeView.vue'

Set it as component:


  {
    path: '/',
    name: 'home',
    component: HomeView
  },

So, if we want to set route "/test" to component "MyTest":

import HomeView from '../components/MyTest.vue'

And...


  {
    path: '/test',
    name: 'test',
    component: MyTest
  },

State & storage

Vuex is a library for managing state in Vue.js applications. If you have developed complex Vue.js applications, you have probably encountered the need for shared state between different components. Vuex solves this challenge by providing a centralized place for storing and managing data at the application level.

In other words, we always have a need for global variables, and state is an event variable that is ideally automatically applied everywhere in the application. For example, we need state to find out which page is active in the navigation menu.

Before we continue, let's clean up the App.vue file:


<template>
  <router-view/>  
</template>

We set the state of the application in the "store.js" file, which is named "store" because: "The name 'store' is used because Vuex is designed to act as a centralized storage or container for managing the state of your Vue.js application." In other words, the name "store" is used because Vuex functions as a centralized storage or container for managing the state of a Vue.js application.

store.js:


import { createStore } from 'vuex';

export default createStore({
  state: {
    count: 0,
    username: localStorage.getItem('store-username'),
  },
  mutations: {
    increment(state) {
      state.count++;
    },
    setUsername(state, name) {
      state.username = name;
      localStorage.setItem('store-username', name);
    },
  }
});

We must import vuex store.js and modify main.js:


import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

createApp(App).use(router).use(store).mount('#app')

We must create two new components to test the state:

./components/MyStateOne.vue


<template>
  <div class="container">
    <h1>MyStateOne</h1>
    
    <div class="btn-group">
      <a href="/state/one" class="btn btn-outline-secondary active">State One</a>
      <a href="/state/two" class="btn btn-outline-secondary">State Two</a>
    </div>
    
    <br><br>
    
    <div class="alert alert-primary" role="alert">
      {{ count }}
    </div>
    <div class="alert alert-primary" role="alert">
      {{ username }}
    </div>   
    
    <div class="btn-group">
      <button @click="increment" class="btn btn-primary active">Increment Count</button>
      <button @click="changeUsername" class="btn btn-primary">Change Username</button>
    </div>

  </div>
</template>

<script>
import { mapState, mapMutations  } from 'vuex';
export default {
  name: 'MyStateOne',
  
  computed: {
    ...mapState(['count']),
    ...mapState(['username']),
  },
  
  methods: {
    ...mapMutations(['increment']), 
    ...mapMutations(['setUsername']), 
    changeUsername() {
      this.$store.commit('setUsername', 'MyStateOne User One');
    },
  },
  
}
</script>

./components/MyStateTwo.vue


<template>
  <div class="container">
    <h1>MyStateTwo</h1>
    
    <div class="btn-group">
      <a href="/state/one" class="btn btn-outline-secondary">State One</a>
      <a href="/state/two" class="btn btn-outline-secondary active">State Two</a>
    </div>
    
    <br><br>
    
    <div class="alert alert-primary" role="alert">
      {{ count }}
    </div>
    <div class="alert alert-primary" role="alert">
      {{ username }}
    </div>   
    
    <div class="btn-group">
      <button @click="increment" class="btn btn-primary active" aria-current="page">Increment Count</button>
      <button @click="changeUsername" class="btn btn-primary">Change Username</button>
    </div>

  </div>
</template>

<script>
import { mapState, mapMutations  } from 'vuex';
export default {
  name: 'MyStateTwo',
  
  computed: {
    ...mapState(['count']),
    ...mapState(['username']),
  },
  
  methods: {
    ...mapMutations(['increment']), 
    ...mapMutations(['setUsername']), 
    changeUsername() {
      this.$store.commit('setUsername', 'MyStateOne User Two');
    },
  },
  
}
</script>

Also we must add changes to routes in "./router/index.js"


import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import MyStateOne from '../components/MyStateOne.vue'
import MyStateTwo from '../components/MyStateTwo.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/state/one',
    name: 'state-one',
    component: MyStateOne
  },
  {
    path: '/state/two',
    name: 'state-two',
    component: MyStateTwo
  },
 
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

SEO

For SEO we can use @vueuse/head package.

 npm i @vueuse/head

In "main.js" we add:

 import { createHead } from '@vueuse/head'

Then using "createApp":

 const head = createHead();
createApp(App).use(head).use(router).use(store).mount('#app');

After this we can use meta data in component:

 import { useHead } from '@vueuse/head'

useHead({
    title: "New title",
    meta: [
    {
      name:"description",
      content:"This is description..."
    }
    ],
});

And that it!. You can download project from here:

Download ↗

After you unpack archive run:

npm install
npm run serve

Labels: javascript, js, vue

damirSijakovic

DS Log

KINGCODE

Featured

VUE on Linux

Symfony PHP

Trying Linux from Windows

AI, Linux & C

How to set up a PHP development server on Ubuntu 22.04

Text editors

Fonts

Try Linux from Windows

Latest

VUE on Linux

Install

index.html

App.vue

Component

Router

State & storage

SEO