Issue Using Vue3 With pinia - vuejs3

Question

I'm having an issue using pinia, Previously I used vuex on my project but I wanted to migrate to pinia to handle my store. So I think, I setup pinia properly. So I can run the serv of my application without issues. But here is what i get when i open the page (PS: The vue dev tools is not anymore detected):
Here is my file package.json:
{
"name": "ecomm-challenge",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^6.1.1",
"#fortawesome/free-regular-svg-icons": "^6.1.1",
"#fortawesome/free-solid-svg-icons": "^6.1.1",
"#fortawesome/vue-fontawesome": "^3.0.0-4",
"core-js": "^3.6.5",
"pinia": "^2.0.14",
"vue": "^3.0.0"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.5.15",
"#vue/cli-plugin-eslint": "~4.5.15",
"#vue/cli-service": "~4.5.15",
"#vue/compiler-sfc": "^3.0.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0",
"sass": "^1.26.5",
"sass-loader": "^8.0.2",
"vue-cli-plugin-pinia": "~0.1.3"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
and here you can find my main.js file:
import { createApp } from "vue";
import App from "./App.vue";
import { library } from "#fortawesome/fontawesome-svg-core";
import { faCartShopping } from "#fortawesome/free-solid-svg-icons";
import { createPinia } from "pinia";
import { FontAwesomeIcon } from "#fortawesome/vue-fontawesome";
library.add(faCartShopping);
const pinia = createPinia();
createApp(App)
.use(pinia)
.component("font-awesome-icon", FontAwesomeIcon)
.mount("#app");
Here is my github if someone want to check the code: https://github.com/Elsong1120/Ecomm-challenge
Thanks to anyone who will help me.

Answer 1

Had similar issues this is what helped me:
1st create a new file in store folder \store\store.js wich looks like this:
import { createPinia, setActivePinia } from "pinia";
const pinia = createPinia();
setActivePinia(pinia);
export default pinia;
2nd import the pinia (exported from \store\store.js) into your main.js
import { createApp } from 'vue';
import pinia from './stores/store.js';
import App from './App.vue';
const app = createApp(App);
app.use(pinia)
app.mount('#app');