Well, I was not touching JS quite a long time. The time came, and I have to create a single page app. What better use I was researched before through some articles which you could find as well, but that’s not a topic - I would like to go through precisely this framework. From workstation which has not even npm.

Install packages

I have apple workstation, that’s why probably you need a bit different ways to get it in windows.

I recommend to install packages globally within flag -g then you might reuse them in every new project. Or you have to do so entirely for every project.

sudo port install nodejs10 npm6

sudo mkdir -p /opt/local/lib/node_modules
sudo chmod -R 0777 /opt/local/lib/node_modules

npm install -g vue eslint @vue/cli #element-ui vue-router vuex 
npm install -g typescript graphql # dependiences
npm install -g eslint @vue/eslint-config-standard
npm install -g eslint-plugin-vue
npm install -g vue-router
npm i --save vuex

Then we could go through PhpStorm and create new Vue project there.

Everything that required should be available.

PhpStorm + Vue

Additional packages which might be useful, but they are optional for first steps.

npm install --save js-cookie
npm install --save requirejs
vue add vuetify
npm install --save element-ui vue-extend-layout 

#mci-icons
npm install material-design-icons-iconfont -D
npm install @mdi/font -D

#sass
npm install sass-loader node-sass --save-dev

Establishing router

I recommend from the start recouple routing to the separate folder. For that we have to create folder src/routers, create file src/routers/index.js (for start blank), and we have to add a line in src/main.js:

import router from './routers'

Fair enough, now we’re ready to use routes. Simple example of src/routers/index.js:

import Vue              from 'vue'
import VueRouter        from 'vue-router'

import Component1       from '@/components/Component1'
import NotFound         from '@/components/NotFound'

Vue.use(VueRouter)

const router = new VueRouter({
    mode: 'history',
    base: __dirname,
    routes: [
        {
            path: '/',
            component: Component1,
        },
        {
            path: '*',
            name: 'NotFound',
            component: NotFound
        }
    ]
})

export default router

After that, we will have a route / and to all others as an error page.

To make this example workable, please add file src/components/Component1.vue

<template>
    <p>
        Component1, route: '/'
    </p>
</template>
<script>
    export default {
        name: 'Component1'
    };
</script>
<style scoped>
    p {
        font-weight: bold;
    }
</style>

To make this example workable, please add file src/components/NotFound.vue

<template>
    <p>
        404 Page not found
    </p>
</template>
<script>
    export default {
        name: 'ErrorPage'
    };
</script>
<style scoped>
    p {
        font-weight: bold;
        font-size: 50px;
        text-align: center;
        color: #f10b0b;
    }
</style>

Establishing layouts

Funny fact, but layouts are bound to routes. Let’s review the next route:

import Vue              from 'vue'
import VueRouter        from 'vue-router'

import DefaultLayout    from '@/components/Layouts/DefaultLayout'
import AuthLayout       from '@/components/Layouts/AuthLayout'

import Component1       from '@/components/Component1'
import Component2       from '@/components/Component2'
import Login            from '@/components/Login'
import NotFound         from '@/components/NotFound'

Vue.use(VueRouter)

const router = new VueRouter({
    mode: 'history',
    base: __dirname,
    routes: [
        {
            path: '/',
            component: DefaultLayout,
            children: [
                {
                    path: 'component2',
                    component: Component2
                },
                {
                    path: '',
                    component: Component1
                }
            ]
        },
        {
            path: '/',
            component: AuthLayout,
            children: [
                {
                    path: 'login',
                    component: Login
                },
                {
                    path: 'logout',
                    beforeEnter(to, from, next) {
//                        auth.logout()
                        next('/')
                    }
                },
            ]
        },
        {
            path: '*',
            name: 'NotFound',
            component: NotFound
        }
    ]
})

export default router

So, what do we have after running?

  • /component2 - layout DefaultLayout
  • / - layout DefaultLayout
  • /login - layout AuthLayout
  • /logout - no layout
  • (:any:) - no layout

What’s happening inside? If we imagine our components as HTML tags then we will have something like that:

<DefaultLayout>
    <Component2></Component2>
</DefaultLayout>

Templates examples of rendwering /component2:

Component2:

<template>
    <div class="component2">
        <h2 data-vel="subheader">{{ title }}</h2>
        <p data-vel="content">{{ content }}</p>
    </div>
</template>

DefaultLayout:

<template>
    <v-app>
        <v-content>
            <router-view></router-view> <!-- <- here vue will insert content of Component2 template -->
        </v-content>
        <v-footer class="pa-3" app>
            <v-spacer></v-spacer>
            <div>&copy; {{ new Date().getFullYear() }}</div>
            <v-spacer></v-spacer>
        </v-footer>
    </v-app>
</template>

The end

Those questions I was faced with during the first day of work with Vue.

Hopefully, that might help you understand the first steps with this great framework!