├── app.vue
├── .gitignore
├── assets
    └── css
    │   └── tailwind.css
├── postcss.config.js
├── tsconfig.json
├── .idea
    ├── .gitignore
    ├── codeStyles
    │   └── codeStyleConfig.xml
    ├── inspectionProfiles
    │   └── Project_Default.xml
    ├── modules.xml
    └── nuxt-three-basics.iml
├── tailwind.config.js
├── package.json
├── README.md
├── nuxt.config.ts
└── pages
    └── index.vue


/app.vue:
--------------------------------------------------------------------------------
1 | <template>
2 | 	<NuxtPage />
3 | </template>
4 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | *.log*
3 | .nuxt
4 | .nitro
5 | .cache
6 | .output
7 | .env


--------------------------------------------------------------------------------
/assets/css/tailwind.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | 	plugins: {
3 | 		tailwindcss: {},
4 | 		autoprefixer: {},
5 | 	},
6 | }
7 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   // https://v3.nuxtjs.org/concepts/typescript
3 |   "extends": "./.nuxt/tsconfig.json"
4 | }
5 | 


--------------------------------------------------------------------------------
/.idea/.gitignore:
--------------------------------------------------------------------------------
1 | # Default ignored files
2 | /shelf/
3 | /workspace.xml
4 | # Editor-based HTTP Client requests
5 | /httpRequests/
6 | 


--------------------------------------------------------------------------------
/.idea/codeStyles/codeStyleConfig.xml:
--------------------------------------------------------------------------------
1 | <component name="ProjectCodeStyleConfiguration">
2 |   <state>
3 |     <option name="PREFERRED_PROJECT_CODE_STYLE" value="Default" />
4 |   </state>
5 | </component>


--------------------------------------------------------------------------------
/.idea/inspectionProfiles/Project_Default.xml:
--------------------------------------------------------------------------------
1 | <component name="InspectionProjectProfileManager">
2 |   <profile version="1.0">
3 |     <option name="myName" value="Project Default" />
4 |     <inspection_tool class="JSUnresolvedVariable" enabled="true" level="WARNING" enabled_by_default="true" />
5 |   </profile>
6 | </component>


--------------------------------------------------------------------------------
/.idea/modules.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <project version="4">
3 |   <component name="ProjectModuleManager">
4 |     <modules>
5 |       <module fileurl="file://$PROJECT_DIR$/.idea/nuxt-three-basics.iml" filepath="$PROJECT_DIR$/.idea/nuxt-three-basics.iml" />
6 |     </modules>
7 |   </component>
8 | </project>


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   content: [
 3 |     "./components/**/*.{js,vue,ts}",
 4 |     "./layouts/**/*.vue",
 5 |     "./pages/**/*.vue",
 6 |     "./plugins/**/*.{js,ts}",
 7 |     "./nuxt.config.{js,ts}",
 8 |     "./app.vue"
 9 |   ],
10 |   theme: {
11 |     extend: {},
12 |   },
13 |   plugins: [],
14 | }
15 | 


--------------------------------------------------------------------------------
/.idea/nuxt-three-basics.iml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <module type="WEB_MODULE" version="4">
 3 |   <component name="NewModuleRootManager">
 4 |     <content url="file://$MODULE_DIR$">
 5 |       <excludeFolder url="file://$MODULE_DIR$/temp" />
 6 |       <excludeFolder url="file://$MODULE_DIR$/.tmp" />
 7 |       <excludeFolder url="file://$MODULE_DIR$/tmp" />
 8 |     </content>
 9 |     <orderEntry type="inheritedJdk" />
10 |     <orderEntry type="sourceFolder" forTests="false" />
11 |   </component>
12 | </module>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "private": true,
 3 |   "scripts": {
 4 |     "build": "nuxt build",
 5 |     "dev": "nuxt dev",
 6 |     "generate": "nuxt generate",
 7 |     "preview": "nuxt preview"
 8 |   },
 9 |   "devDependencies": {
10 |     "@nuxtjs/tailwindcss": "^5.0.4",
11 |     "autoprefixer": "^10.4.7",
12 |     "nuxt": "3.0.0-rc.3",
13 |     "postcss": "^8.4.13",
14 |     "sass": "^1.51.0",
15 |     "sass-loader": "10",
16 |     "tailwindcss": "^3.0.24"
17 |   },
18 |   "dependencies": {
19 |     "bootstrap": "^5.1.3",
20 |     "bootstrap-vue": "^2.22.0",
21 |     "bootstrap-vue-3": "^0.1.12",
22 |     "axios": "^0.27.2",
23 |     "vue": "^3.2.33"
24 |   }
25 | }
26 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Nuxt 3 Minimal Starter
 2 | 
 3 | Look at the [nuxt 3 documentation](https://v3.nuxtjs.org) to learn more.
 4 | 
 5 | ## Setup
 6 | 
 7 | Make sure to install the dependencies:
 8 | 
 9 | ```bash
10 | # yarn
11 | yarn install
12 | 
13 | # npm
14 | npm install
15 | 
16 | # pnpm
17 | pnpm install --shamefully-hoist
18 | ```
19 | 
20 | ## Development Server
21 | 
22 | Start the development server on http://localhost:3000
23 | 
24 | ```bash
25 | npm run dev
26 | ```
27 | 
28 | ## Production
29 | 
30 | Build the application for production:
31 | 
32 | ```bash
33 | npm run build
34 | ```
35 | 
36 | Locally preview production build:
37 | 
38 | ```bash
39 | npm run preview
40 | ```
41 | 
42 | Checkout the [deployment documentation](https://v3.nuxtjs.org/guide/deploy/presets) for more information.
43 | 


--------------------------------------------------------------------------------
/nuxt.config.ts:
--------------------------------------------------------------------------------
 1 | import {defineNuxtConfig} from 'nuxt'
 2 | 
 3 | export default defineNuxtConfig({
 4 | 	modules: ['bootstrap-vue-3/nuxt'],
 5 | 	buildModules: ['@nuxtjs/tailwindcss'],
 6 | 	css: [
 7 | 		'@/assets/css/tailwind.css',
 8 | 		'bootstrap/dist/css/bootstrap.css'
 9 | 	],
10 | 	build: {
11 | 		postcss: {
12 | 			postcssOptions: {
13 | 				plugins: {
14 | 					tailwindcss: {},
15 | 					autoprefixer: {},
16 | 				},
17 | 			}
18 | 		},
19 | 	},
20 | 	app: {
21 | 		head: {
22 | 			titleTemplate: '%s - ' + process.env.npm_package_name,
23 | 			meta: [
24 | 				{charset: 'utf-8'},
25 | 				{name: 'viewport', content: 'width=device-width, initial-scale=1'},
26 | 				{hid: 'description', name: 'description', content: process.env.npm_package_description || ''}
27 | 			],
28 | 			script: [
29 | 				{src: 'https://code.jquery.com/jquery-3.3.1.slim.min.js'},
30 | 				{src: 'https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js'},
31 | 				{src: 'https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js'},
32 | 				{src: 'https://telegram.org/js/telegram-web-app.js'}
33 | 			]
34 | 		}
35 | 	}
36 | })
37 | 


--------------------------------------------------------------------------------
/pages/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<div class="main-form h-screen bg-black-100">
  3 | 		<div class="main-form-wrapper border-1 border-gray-300 bg-gray-100 p-8 rounded-xl">
  4 | 			<b-form @submit="onSubmit" @reset="onReset" v-if="show">
  5 | 				<b-form-group
  6 | 					 id="input-group-1"
  7 | 					 label="Email address:"
  8 | 					 label-for="input-1"
  9 | 					 description="We'll never share your email with anyone else."
 10 | 				>
 11 | 					<b-form-input
 12 | 						 id="input-1"
 13 | 						 v-model="form.email"
 14 | 						 type="email"
 15 | 						 placeholder="Enter email"
 16 | 						 required
 17 | 					></b-form-input>
 18 | 				</b-form-group>
 19 | 				
 20 | 				<b-form-group id="input-group-2" label="Your Name:" label-for="input-2">
 21 | 					<b-form-input
 22 | 						 id="input-2"
 23 | 						 v-model="form.name"
 24 | 						 placeholder="Enter name"
 25 | 						 required
 26 | 					></b-form-input>
 27 | 				</b-form-group>
 28 | 				
 29 | 				<b-form-group id="input-group-3" label="Food:" label-for="input-3">
 30 | 					<b-form-select
 31 | 						 id="input-3"
 32 | 						 v-model="form.food"
 33 | 						 :options="foods"
 34 | 						 required
 35 | 					></b-form-select>
 36 | 				</b-form-group>
 37 | 				
 38 | 				<b-form-group id="input-group-4" v-slot="{ ariaDescribedby }">
 39 | 					<b-form-checkbox-group
 40 | 						 v-model="form.checked"
 41 | 						 id="checkboxes-4"
 42 | 						 :aria-describedby="ariaDescribedby"
 43 | 					>
 44 | 						<b-form-checkbox value="me">Check me out</b-form-checkbox>
 45 | 						<b-form-checkbox value="that">Check that out</b-form-checkbox>
 46 | 					</b-form-checkbox-group>
 47 | 				</b-form-group>
 48 | 				
 49 | 				<div id="input-group-4" class="flex gap-2">
 50 | 					<b-button type="submit" variant="primary">Submit</b-button>
 51 | 					<b-button type="reset" variant="danger">Reset</b-button>
 52 | 				</div>
 53 | 			</b-form>
 54 | 			<b-card class="mt-3" header="Form Data Result">
 55 | 				<pre class="m-0">{{form}}</pre>
 56 | 			</b-card>
 57 | 		</div>
 58 | 	</div>
 59 | </template>
 60 | 
 61 | <style lang="scss">
 62 | .main-form {
 63 | 	height: 100vh;
 64 | 	display: flex;
 65 | 	flex-direction: column;
 66 | 	align-items: center;
 67 | 	justify-content: center;
 68 | 	
 69 | 	&-wrapper {
 70 | 		width: 500px;
 71 | 	}
 72 | }
 73 | </style>
 74 | 
 75 | <script>
 76 | export default {
 77 | 	data() {
 78 | 		return {
 79 | 			form: {
 80 | 				email: '',
 81 | 				name: '',
 82 | 				food: null,
 83 | 				checked: []
 84 | 			},
 85 | 			foods: [{text: 'Select One', value: null}, 'Carrots', 'Beans', 'Tomatoes', 'Corn'],
 86 | 			show: true
 87 | 		}
 88 | 	},
 89 | 	methods: {
 90 | 		onSubmit(event) {
 91 | 			event.preventDefault()
 92 | 			alert(JSON.stringify(this.form))
 93 | 		},
 94 | 		onReset(event) {
 95 | 			event.preventDefault()
 96 | 			// Reset our form values
 97 | 			this.form.email = ''
 98 | 			this.form.name = ''
 99 | 			this.form.food = null
100 | 			this.form.checked = []
101 | 			// Trick to reset/clear native browser form validation state
102 | 			this.show = false
103 | 			this.$nextTick(() => {
104 | 				this.show = true
105 | 			})
106 | 		}
107 | 	}
108 | }
109 | </script>
110 | 


--------------------------------------------------------------------------------