thecodeholic / laravel-vue-survey Goto Github PK
View Code? Open in Web Editor NEWThis is a full stack application of Vue 3 with Tailwindcss 3 and Laravel 8
Home Page: https://yoursurveys.xyz
This is a full stack application of Vue 3 with Tailwindcss 3 and Laravel 8
Home Page: https://yoursurveys.xyz
I created survey and tried to follow the link
There is 404 error for all survey public links
in front end get error "Unauthenticated."
but when test the logout on the postman work successfully
axios.js file
import axios from 'axios';
import store from './store';
const axiosClient = axios.create({
baseURL : ' http://127.0.0.1:8000/api'
})
axiosClient.interceptors.request.use( (config) => {
config.headers.Authrization = `Bearer ${store.state.user.token}`;
return config;
}) export default axiosClient;
defaultlayout .vue
<!-- This example requires Tailwind CSS v2.0+ -->
<template>
<!--
This example requires updating your template:
```
<html class="h-full bg-gray-100">
<body class="h-full">
```
-->
<div class="min-h-full">
<Disclosure as="nav" class="bg-gray-800" v-slot="{ open }">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<div class="flex items-center">
<div class="flex-shrink-0">
<img class="h-8 w-8" src="https://tailwindui.com/img/logos/workflow-mark-indigo-500.svg" alt="Workflow" />
</div>
<div class="hidden md:block">
<div class="ml-10 flex items-baseline space-x-4">
<router-link v-for="item in navigation"
:key="item.name"
:to="item.to"
:class="[
this.$route.name === item.to.name
? 'text-white'
: 'text-gray-300 hover:bg-gray-700 hover:text-white',
'px-3 py-2 rounded-md text-sm font-medium',
]">
{{ item.name }}</router-link>
</div>
</div>
</div>
<div class="hidden md:block">
<div class="ml-4 flex items-center md:ml-6">
<button type="button" class="bg-gray-800 p-1 rounded-full text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
<span class="sr-only">View notifications</span>
<BellIcon class="h-6 w-6" aria-hidden="true" />
</button>
<!-- Profile dropdown -->
<Menu as="div" class="ml-3 relative">
<div>
<MenuButton class="max-w-xs bg-gray-800 rounded-full flex items-center text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
<span class="sr-only">Open user menu</span>
<img class="h-8 w-8 rounded-full" :src="user.imageUrl" alt="" />
</MenuButton>
</div>
<transition enter-active-class="transition ease-out duration-100" enter-from-class="transform opacity-0 scale-95" enter-to-class="transform opacity-100 scale-100" leave-active-class="transition ease-in duration-75" leave-from-class="transform opacity-100 scale-100" leave-to-class="transform opacity-0 scale-95">
<MenuItems class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none">
<MenuItem active-class="bg-gray-900 text-white">
<a
@click="logout" :class="['block cursor-pointer px-4 py-2 text-sm text-gray-700']">Sign out</a>
</MenuItem>
</MenuItems>
</transition>
</Menu>
</div>
</div>
<div class="-mr-2 flex md:hidden">
<!-- Mobile menu button -->
<DisclosureButton class="bg-gray-800 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
<span class="sr-only">Open main menu</span>
<MenuIcon v-if="!open" class="block h-6 w-6" aria-hidden="true" />
<XIcon v-else class="block h-6 w-6" aria-hidden="true" />
</DisclosureButton>
</div>
</div>
</div>
<DisclosurePanel class="md:hidden">
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
<router-link
v-for="item in navigation"
:key="item.name"
:to="item.to"
active-class="bg-gray-900 text-white"
:class="[
this.$route.name === item.to.name
? 'text-white'
: 'text-gray-300 hover:bg-gray-700 hover:text-white',
'block px-3 py-2 rounded-md text-base font-medium',
]"
>{{ item.name }}
</router-link>
</div>
<div class="pt-4 pb-3 border-t border-gray-700">
<div class="flex items-center px-5">
<div class="flex-shrink-0">
<img class="h-10 w-10 rounded-full" :src="user.imageUrl" alt="" />
</div>
<div class="ml-3">
<div class="text-base font-medium leading-none text-white">{{ user.name }}</div>
<div class="text-sm font-medium leading-none text-gray-400">{{ user.email }}</div>
</div>
<button type="button" class="ml-auto bg-gray-800 flex-shrink-0 p-1 rounded-full text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
<span class="sr-only">View notifications</span>
<BellIcon class="h-6 w-6" aria-hidden="true" />
</button>
</div>
<div class="mt-3 px-2 space-y-1">
<DisclosureButton
@click="logout"
class="block px-3 py-2 rounded-md text-base cursor-pointer font-medium text-gray-400 hover:text-white hover:bg-gray-700">{{ item.name }}</DisclosureButton>
</div>
</div>
</DisclosurePanel>
</Disclosure>
<router-view></router-view>
</div>
</template>
<script>
import { Disclosure, DisclosureButton, DisclosurePanel, Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
import { BellIcon, MenuIcon, XIcon } from '@heroicons/vue/outline'
import { useStore } from 'vuex'
import {computed} from 'vue'
import {useRouter } from 'vue-router'
const user = {
name: 'Tom Cook',
email: '[email protected]',
imageUrl:
'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
}
const navigation = [
{ name: 'Dashboard',to : {name:'Dashboard'} },
{ name: 'Surveys', to : {name: 'Surveys'} },
]
export default {
components: {
Disclosure,
DisclosureButton,
DisclosurePanel,
Menu,
MenuButton,
MenuItem,
MenuItems,
BellIcon,
MenuIcon,
XIcon,
},
setup() {
const store = useStore();
const router = useRouter();
function logout() {
store.dispatch("logout")
.then(() => {
router.push({
name: "Login",
});
});
}
return {
user : computed( () => store.state.user.data),
navigation,
logout
}
},
}
</script>
store / index.js
import {createStore} from 'vuex';
import axiosClient from '../axios';
const store = createStore({
state: {
user: {
data: {},
token: sessionStorage.getItem('TOKEN')
}
},
getters: {},
actions: {
register({commit}, user) {
axiosClient.defaults.headers.common['Authorization'] = `${access_token}`
return axiosClient.post('/register', user)
.then(({data}) => {
commit('setUser', data);
return data;
})
},
login({commit}, user) {
return axiosClient.post('/login', user)
.then(({data}) => {
commit('setUser', data);
return data;
})
},
logout({commit}) {
return axiosClient.post('/logout')
.then(response => {
commit('logout')
return response;
})
}
},
mutations: {
logout: (state) => {
state.user.token = null;
state.user.data = {};
sessionStorage.removeItem('TOKEN');
},
setUser: (state, userData) => {
state.user.token = userData.token;
state.user.data = userData.user;
sessionStorage.setItem('TOKEN', userData.token);
}
},
modules: {}
});
export default store;
how can i fix this issue ?
Pre-bundling dependencies:
vue
(this will be run only when your dependencies or config have changed)
X [ERROR] Failed to write to output file: open C:...\laravel-vue-survey\vue\node_modules.vite\vue.js.map: The system cannot find the file specified.
X [ERROR] Failed to write to output file: open C:...\laravel-vue-survey\vue\node_modules.vite\vue.js: The system cannot find the file specified.
$ npm -v
8.3.1
$ node -v
v16.14.0
There is error when npm run dev, been searching for solution. but still got the same error..
Hi ๐ theCodeholic, thanks for sharing a very helping content, I am currently running through an issue related to cross origin resource sharing, when I tried to create new survey, after implementing the code you, showed in the video, I have been having this same issue over and over for couple of weeks, I have tried different ways, just to see that I'm able to remove the errors, but all effort proved abortive, I don't know if you can help me on what to do to solve this problem, I would appreciate if you would drop a video, regarding this issue... Thanks alot
No answers for that type are being saved.
Thank you for an awesome tut on YT. I liked and subscribed. I watched the whole thing from scratch โค๏ธ Thanks for your time.
logout not working from the frontend ( saying unauthneticated )though its working from the backend
Solved.
all routes end to 404 status
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.